Awesome Open Source
Awesome Open Source

微信小程序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

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,090,062
Redux (28,346
Connect (8,672
Weapp (4,248
Wechat (4,248
Todos (2,165
Minify (1,912
Redux Store (607