======== Miniprogram bindings for Redux （在小程序中使用Redux）
小程序开发有时也会遇到复杂的业务场景，例如跨页面的数据传递，非父子组件的数据同步，多个子孙组件的数据复用等等，此时，global data或者selectComponent已经无法很好地提供支持，相反，它们会导致业务逻辑代码和模板代码迅速膨胀到难以维护，且容易产生难以追踪的bug隐患。
redux作为一个已经被熟知且广泛应用到react项目中的状态管理方案，可以很好地帮助我们解决此类问题。
1.自行引用redux，如果你需要处理异步，可以自行引用thunk，saga或者what ever，这一步与你以往使用redux的web项目没有任何区别
2.从npm安装，或克隆此项目后将dist目录下已构建好的mp-redux.js文件拷贝出来，注意之后从微信开发者工具构建到项目，mp-redux提供了如下三个API
npm install -S wechat-mp-redux为
App注入创建好的store
// app.js
import { createStore } from './lib/redux'
import reducer from './reducer/index'
import getInitialState from './getInitialState'
import { Provider } from './lib/mp-redux'
App(
Provider(createStore(reducer, getInitialState()))({
// ...app config
})
)绑定
store到小程序页面
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)
}
})
)绑定
store到小程序自定义组件，用法与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)
}
}
})
)使用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){ // 与绑定的state属性同名，当state.num发生变更时，会调用此函数，并传入新的值与旧的值
this.setData({ // 注意，此时setData不会再自动触发，由开发者自行对数据处理后调用
num: newVal * 10
})
}
}
})
)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent