{"id":13654368,"url":"https://github.com/charleyw/wechat-weapp-redux","last_synced_at":"2025-04-23T09:33:25.212Z","repository":{"id":147589005,"uuid":"69541441","full_name":"charleyw/wechat-weapp-redux","owner":"charleyw","description":"微信小程序Redux绑定","archived":false,"fork":false,"pushed_at":"2018-07-10T09:52:57.000Z","size":21,"stargazers_count":482,"open_issues_count":14,"forks_count":86,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-10T06:32:03.615Z","etag":null,"topics":["redux","redux-store","weapp","wechat-weapp-redux"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/charleyw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-09-29T07:18:23.000Z","updated_at":"2024-08-26T09:47:08.000Z","dependencies_parsed_at":"2023-06-15T09:00:42.559Z","dependency_job_id":null,"html_url":"https://github.com/charleyw/wechat-weapp-redux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charleyw%2Fwechat-weapp-redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charleyw%2Fwechat-weapp-redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charleyw%2Fwechat-weapp-redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charleyw%2Fwechat-weapp-redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charleyw","download_url":"https://codeload.github.com/charleyw/wechat-weapp-redux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250407700,"owners_count":21425546,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["redux","redux-store","weapp","wechat-weapp-redux"],"created_at":"2024-08-02T03:00:30.756Z","updated_at":"2025-04-23T09:33:24.990Z","avatar_url":"https://github.com/charleyw.png","language":"JavaScript","funding_links":[],"categories":["Demo","实用库","Uncategorized"],"sub_categories":["Uncategorized","数据接口有问题"],"readme":"\n微信小程序Redux绑定\n==============\n用于在微信小程序为页面绑定Redux Store。\n\n_PS: 代码是基于[react-redux](https://github.com/reactjs/react-redux)修改的_\n\n## 安装\n1. clone或者下载代码库到本地:\n\n   ```shell\n    git clone https://github.com/charleyw/wechat-weapp-redux\n   ```\n2. 将`dist/wechat-weapp-redux.js`(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如（下面假设我们把第三方包都安装在libs目录下）:\n\n   ```    shell\n    cd wechat-weapp-redux\n    cp -r dist/wechat-weapp-redux.js \u003c小程序根目录\u003e/libs\n   ```\n    上面的命令将包拷贝到小程序的`libs`目录下\n\n## 使用\n1. 将Redux Store绑定到App上。\n\n   ```js\n    const store = createStore(reducer) // redux store\n    \n    const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');\n    const {Provider} = WeAppRedux;\n    \n   ```\n    **Provider**是用来把Redux的store绑定到App上。\n\n    ```\n    App(Provider(store)({\n      onLaunch: function () {\n        console.log(\"onLaunch\")\n      }\n    }))\n    ```\n    provider的实现只是简单的将store加到App这个global对象上,方便在页面中用getApp取出来\n\n    上面这段代码等同于:\n    ```\n    App({\n      onLaunch: function() {\n          console.log( \"onLaunch\" )\n        },\n        store: store\n    })\n    ```\n2. 在页面的定义上使用connect,绑定redux store到页面上。\n\n   ```js\n    const pageConfig = {\n      data: {\n      },\n      ...\n    }\n\n   ```\n    页面的定义\n\n   ```js\n    const mapStateToData = state =\u003e ({\n      todos: state.todos,\n      visibilityFilter: state.visibilityFilter\n    })\n   ```\n    定义要映射哪些state到页面\n\n   ```js\n    const mapDispatchToPage = dispatch =\u003e ({\n      setVisibilityFilter: filter =\u003e dispatch(setVisibilityFilter(filter)),\n      toggleTodo: id =\u003e dispatch(toggleTodo(id)),\n      addTodo: text =\u003e dispatch(addTodo(text)),\n    })\n   ```\n    定义要映射哪些方法到页面\n\n   ```js      \n    const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)\n   ```\n    使用connect将上述定义添加到pageConfig中。\n\n   ```js            \n    Page(nextPageConfig);\n   ```\n    注册小程序的页面\n\n3. 说明\n\n    完成上述两步之后,你就可以在`this.data`中访问你在`mapStateToData`定义的数据了。\n\n    `mapDispatchToPage`定义的action会被映射到`this`对象上。\n\n## Example\n\n详细的使用例子可以参照: [wechat-weapp-redux-todos](https://github.com/charleyw/wechat-weapp-redux-todos)\n\n真机实测版请clone下面这个repo，用小程序开发工具开启预览：\n```\ngit clone -b release https://github.com/charleyw/wechat-weapp-redux-todos.git\n```\n​    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharleyw%2Fwechat-weapp-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharleyw%2Fwechat-weapp-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharleyw%2Fwechat-weapp-redux/lists"}