charleyw / wechat-weapp-redux

微信小程序Redux绑定

微信小程序Redux绑定

用于在微信小程序为页面绑定Redux Store。

PS: 代码是基于react-redux修改的

安装

1. clone或者下载代码库到本地:

    git clone https://github.com/charleyw/wechat-weapp-redux

2. 将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如（下面假设我们把第三方包都安装在libs目录下）:

    cd wechat-weapp-redux
    cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs

   上面的命令将包拷贝到小程序的libs目录下

使用

1. 将Redux Store绑定到App上。

    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到页面上。

    const pageConfig = {
      data: {
      },
      ...
    }

   页面的定义

    const mapStateToData = state => ({
      todos: state.todos,
      visibilityFilter: state.visibilityFilter
    })

   定义要映射哪些state到页面

    const mapDispatchToPage = dispatch => ({
      setVisibilityFilter: filter => dispatch(setVisibilityFilter(filter)),
      toggleTodo: id => dispatch(toggleTodo(id)),
      addTodo: text => dispatch(addTodo(text)),
    })

   定义要映射哪些方法到页面

    const nextPageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)

   使用connect将上述定义添加到pageConfig中。

    Page(nextPageConfig);

   注册小程序的页面

3. 说明

   完成上述两步之后,你就可以在this.data中访问你在mapStateToData定义的数据了。

   mapDispatchToPage定义的action会被映射到this对象上。

Example

详细的使用例子可以参照: wechat-weapp-redux-todos

真机实测版请clone下面这个repo，用小程序开发工具开启预览：

git clone -b release https://github.com/charleyw/wechat-weapp-redux-todos.git

​

wechat-weapp-redux's Issues

有几条个人观点想表达一下

貌似你是第一个想做Redux集成的, 看到其他几个issues, 有点想法, 不妥之处请批评.

1. 这个Redux binding实现需要decouple, 上下文里期望global.getApp(), 测试不好写.
2. 需不需要subscribe store不应该仅仅依赖有无传进mapState函数, 是不是要考虑App和Page的life-cycle?
3. Provider在微信小程序情况下, 似乎没什么太大作用, 似乎只是引入了一个变量

之前在找weapp redux方案, 也看到过你的项目, 觉得不是我想要的, 所以这两天也自己写了一下connect实现 redux-weapp, 希望一起交流一下.

remote-redux-devtools.js文件来源

实现的功能很赞！就是想请教下，wechat-weapp-redux-todos项目里，./libs/remote-redux-devtools.js这个文件你是安装的remote-redux-devtools么，为什么我安装后，在node_modules里找不到这个文件呢？还望赐教。

小程序的环境shallowEqual 应该工作不了

https://github.com/charleyw/wechat-weapp-redux/blob/master/src/connect.js#L32

这里shallowEquall 感觉工作不了的，小程序的setData 会把数据复制一份（方便传输到视图层），也就是说这个判断理论上是不可能成立的。

这样做有什么好处呢？

同时发起两个请求，其中一个请求的数据无法存入store

比如在小程序启动时同时请求主页和推荐商品数据，两个请求都是crudGetList，请求都成功了，但是store中只存入了其中一个请求的数据，如果分别进行单独请求，数据都能正常存入store

redux-thunk怎么植入

RT。redux-thunk怎么修改后才能在configureStore的createStore中使用？

android版微信小程序真机调试报错:Page[pages/index/index]not found

用weapp-redux的Page(connect(page))注册，在微信开发工具里调试没有问题，但在小程序真机环节下运行，报错信息：
Page[pages/index/index]not found. May be caused by:
1.Forgot to add page route in app.json.
2.Invoking Page() in async task.

支付宝小程序支持

请问有计划支持支付宝小程序开发么？

自定义组件Component()能通过connect绑定数据和动作吗？

我错了，折磨一天了！！

快检查一下，大哥

无法调用page的生命周期方法onload

page里的connect方法会把page本身的声明周期方法onLoad, unLoad 方法给覆盖掉

mapStateToData 第二个变量 是 params 或 options

发现你已很久没有维护这个项目，很遗憾，但使用中还是遇到这个问题，提下看谁能给些帮助

mapStateToData(state, args) 中 args 在你的 wechat-weapp-redux-todos的例子中是onLoaunch 的 options, 试了下不能用网页绑定的数据 data ， 但在 react-redux中 可以是 ownProps, 最好是 mapStateToData(state, options, dataPage), mapDispatchToPage(dispatch, options, dataPage), 我自己改了些，但出现其他问题，有谁能帮忙？

package.json里"main": "lib/index.js"找不到，导致require('wechat-weapp-redux')引用失败。

npm安装完后，package.json里，"main": "lib/index.js"找不到, 导致require('wechat-weapp-redux')引用失败。

package.json里build的文件名和npm安装的不一致

package.json里build的目标文件名是wechat-weapp-redux
而npm后的目标文件名是wechat-app-redux
建议把package.json里的build设置改成和npm一致。

你好，state的某个属性变化后 页面内能捕获得到，调用某个函数吗？

就是例如 C页面修改了进行了登录 然后我的A页面 捕获到这个token变化后 重新刷新接口

createStore方法找不到

const store = createStore(reducer) // redux store

const WeAppRedux = require('./libs/wechat-weapp-redux/index.js');
const {Provider} = WeAppRedux;
这几句要写在哪里？写在app.js里报没有找到createStore的错
还有WeAppRedux指向的index.js是什么文件？

请问怎么获取onLoad的options

你好，我在使用你的库的时候遇到一个问题，就是跳转到一些页面时，会带一些参数过去用来获取数据，但是使用你的库的时候，无法获取onLoad中options对象，请问怎么解决？

Page onLoad和onUnload生命周期失效

不好意思，是我用的版本太旧了，最新的没这个问题了

有异步的解决方法吗？比如请求数据什么的