用于在微信小程序為頁面綁定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

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