在微信小程序中使用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

转载于:https://juejin.im/post/5be7e107e51d45092866e5bc