在微信小程式中使用redux

Acurse發表於2019-02-28
微信小程式Redux
mp-redux : Miniprogram bindings for Redux 

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

redux作為一個已經被熟知且廣泛應用到react專案中的狀態管理方案，可以很好地幫助我們解決此類問題。這也就是mp-redux的來源，為了降低額外的理解或學習成本，使用方式及API與react-redux儘可能地保持了一致。

使用

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

相關文章