在微信小程序中使用redux

mp-redux : Miniprogram bindings for Redux 

 小程序開發有時不免也會遇到複雜的業務場景，例如跨頁面的數據傳遞，非父子組件的數據同步，多個子孫組件的數據複用等等，此時，global data或者triggerEvent/selectComponent已經沒法很好地提供支持，相反，它們會致使業務邏輯代碼和模板代碼迅速膨脹到難以閱讀和維護，同時也容易產生難以追蹤的bug隱患。 

redux做爲一個已經被熟知且普遍應用到react項目中的狀態管理方案，能夠很好地幫助咱們解決此類問題。這也就是mp-redux的來源，爲了下降額外的理解或學習成本，使用方式及API與react-redux儘量地保持了一致。

Github Repo: github.com/acurseJ/mp-…

使用 1.引入redux，若是你須要處理異步亦或其餘的side effect，能夠自行引用thunk，saga或者任何中間件，與以往使用redux的web項目沒有任何區別

附：redux repo github.com/reduxjs/red…

2.將mp-redux dist目錄下的mp-redux.js文件拷貝出來，mp-redux提供了三個API，分別爲

Provider

爲App注入建立後的store

// app.js
import { createStore } from './lib/redux'
import rootReducer from './reducer/index'
import getInitialState from './getInitialState'
import { Provider } from './lib/mp-redux'

App(
 Provider(createStore(rootReducer, getInitialState()))({
         // ...app config
    })
)複製代碼

connect

綁定小程序頁面

import { add } from './actions'
import { connect } from '../lib/mp-redux'

const mapStateToProps = state => ({
 num: state.num
})

const mapDispatchToProps = {
 add
}

Page(
 connect(mapStateToProps,mapDispatchToProps)({
   // ...page config
   customClick() {
       this.add(1)
      }
   })
)複製代碼

connectComponent

綁定小程序自定義組件，用法與connect類似，區別在於一個用於綁定頁面，一個用於綁定組件

import { minus } from './actions'
import { connectComponent } from '../../lib/mp-redux'

const mapStateToProps = state => ({
 num: state.num
})

const mapDispatchToProps = {
 minus
}

Component(
 connectComponent(mapStateToProps,mapDispatchToProps)({
   // ...component config
   methods: {
     customClick() {
       this.minus(2)
       }
     }
  })
)複製代碼

自定義監聽watch 

對於使用react的項目，咱們在渲染函數中能夠自行處理組件接收到的props，例如文本轉換，數據格式化等等，而在小程序中，邏輯層與視圖層分離，且沒有提供類computed的計算屬性API，所以若是須要在setData以前，自定義處理髮生變動的數據無疑是一件很麻煩的事，mp-redux提供了watch，能夠幫助監聽到state指定字段的變動而且將setData權限交還給開發者。

const mapStateToProps = state => ({
 num: state.num
})

Component(
 connectComponent(mapStateToProps)({
   // ...component config
     watch: {
         num(newVal, oldVal){  // 與maped state屬性同名，當num發生變動時會調用此函數，並傳入新的值與舊的值
            this.setData({    // 注意，此時setData不會再自動觸發，由開發者自行對數據處理後調用
                num: newVal * 10
              })
           }
        }
    })
)複製代碼

連接地址

項目地址： mp-redux 

小程序示例代碼：mp-redux demo