微信小程序Redux绑定
==============
用于在微信小程序为页面绑定Redux Store。
_PS: 代码是基于[react-redux](https://github.com/reactjs/react-redux)修改的_
## 安装
1. clone或者下载代码库到本地:
```shell
git clone https://github.com/charleyw/wechat-weapp-redux
```
2. 将`dist/wechat-weapp-redux.js`(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下):
``` shell
cd wechat-weapp-redux
cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs
```
上面的命令将包拷贝到小程序的`libs`目录下
## 使用
1. 将Redux Store绑定到App上。
```js
const store = createStore(reducer) // redux store
const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
const {Provider} = WeAppRedux;
```
**Provider**是用来把Redux的store绑定到App上。
```
App(Provider(store)({
onLaunch: function () {
console.log("onLaunch")
}
}))
```
provider的实现只是简单的将store加到App这个global对象上,方便在页面中用getApp取出来
上面这段代码等同于:
```
App({
onLaunch: function() {
console.log( "onLaunch" )
},
store: store
})
```
2. 在页面的定义上使用connect,绑定redux store到页面上。
```js
const pageConfig = {
data: {
},
...
}
```
页面的定义
```js
const mapStateToData = state => ({
todos: state.todos,
visibilityFilter: state.visibilityFilter
})
```
定义要映射哪些state到页面
```js
const mapDispatchToPage = dispatch => ({
setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
toggleTodo: id => dispatch(toggleTodo(id)),
addTodo: text => dispatch(addTodo(text)),
})
```
定义要映射哪些方法到页面
```js
const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)
```
使用connect将上述定义添加到pageConfig中。
```js
Page(nextPageConfig);
```
注册小程序的页面
3. 说明
完成上述两步之后,你就可以在`this.data`中访问你在`mapStateToData`定义的数据了。
`mapDispatchToPage`定义的action会被映射到`this`对象上。
## Example
详细的使用例子可以参照: [wechat-weapp-redux-todos](https://github.com/charleyw/wechat-weapp-redux-todos)
真机实测版请clone下面这个repo,用小程序开发工具开启预览:
```
git clone -b release https://github.com/charleyw/wechat-weapp-redux-todos.git
```
没有合适的资源?快使用搜索试试~ 我知道了~
10套微信小程序源码模版
共391个文件
png:125个
js:85个
wxss:51个
0 下载量 180 浏览量
2023-02-23
23:55:38
上传
评论
收藏 24.98MB ZIP 举报
温馨提示
10套微信小程序源码模版 v2ex IT-EBOOK movecss效果 备忘录 todo list LOL战绩查询
资源推荐
资源详情
资源评论
收起资源包目录
10套微信小程序源码模版 (391个子文件)
.babelrc 113B
.editorconfig 99B
3123.gif 5.04MB
1.gif 5.04MB
wechat-v2ex-2.gif 2.18MB
wechat-v2ex-2.gif 2.18MB
wechat-v2ex-1.gif 1.83MB
wechat-v2ex-1.gif 1.83MB
remote-redux-devtools.gif 1.28MB
remote-redux-devtools.gif 1.28MB
lolgame.gif 1.1MB
lolgame.gif 1.1MB
lolgame-fuzzy.gif 362KB
lolgame-fuzzy.gif 362KB
.gitignore 607B
.gitignore 592B
.gitignore 20B
handler.go 2KB
msg.go 706B
sendUserInfo.go 647B
module.go 573B
sendHello.go 572B
chanrpc.go 426B
json.go 392B
reader.go 379B
router.go 368B
skeleton.go 359B
conf.go 324B
main.go 307B
module.go 285B
module.go 285B
handler.go 156B
external.go 120B
external.go 118B
external.go 89B
index.html 8KB
screenshot1.jpg 94KB
1.jpg 94KB
screenshot2.jpg 73KB
2.jpg 73KB
profile_header.jpg 17KB
leancloud-storage.js 474KB
remote-redux-devtools.js 305KB
encoding.js 92KB
redux.js 29KB
reconnecting-websocket.js 14KB
wechat-weapp-redux.js 9KB
wechat-weapp-redux.js 9KB
userinfo.js 9KB
detail.js 7KB
fuzzy.js 4KB
battledetail.js 4KB
index.js 3KB
wechat-weapp-redux.min.js 3KB
test.js 3KB
todos.js 3KB
app.js 3KB
index.js 3KB
index.js 3KB
rank.js 3KB
hero.js 3KB
background-audio.js 2KB
data.js 2KB
util.js 2KB
connect.js 2KB
search.js 2KB
index.js 2KB
index.js 1KB
api.js 1KB
detail.js 1KB
util.js 1KB
detail.js 1KB
wrapActionCreators.js 1KB
index.js 1KB
app.js 1KB
setting.js 927B
index.js 899B
latest.js 897B
app.js 852B
hotest.js 790B
topicList.js 788B
app.js 752B
index.js 746B
app.js 732B
index.js 729B
app.js 726B
app.js 723B
index.js 722B
webpack.config.js 720B
index.js 711B
area.js 688B
Object.js 686B
todos.js 686B
Object.js 686B
hero_free.js 659B
warning.js 646B
encoding.js 634B
index.js 591B
rankdetail.js 590B
herodetail.js 586B
共 391 条
- 1
- 2
- 3
- 4
资源评论
未来在这儿
- 粉丝: 3239
- 资源: 265
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功