Skip to content

charleyw/wechat-weapp-redux

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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

About

微信小程序Redux绑定

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published