Redux作为一个应用状态管理工具，自身和应用框架没有耦合。理论上我们可以将Redux应用到任何应用中，这也是本文标题Redux Anywhere的由来。本文简单分析React应用中使用Redux的原理，同时整理了如何在微信小程序中使用Redux。
1.React中使用Redux
1.1 使用示例
在React中使用Redux，需要使用React-Redux工具。这一工具为我们提供了两个组件
- Provider.js
- connect.js
当我们在React中使用Redux时，首先将顶层组件用Provider包裹
var store = createStore(reducer);
var Provider = require('react-redux').Provider;
// App 为上层的Component
class App extend React.Component{
render() {
return (
<Provier store={store}>
<Container />
</Provider>
);
}
}
在组件中，通过connect方法，返回一个被包裹的组件
var connect = require('react-redux').connect;
var actionCreators = require('...');
// MyComponent是与redux无关的组件
var MyComponent = require('...');
function select(state) {
return {
count: state.count
}
}
export default connect(select, actionCreators)(MyComponent)
1.2 原理简析
Provider主要代码
export default class Provider extends Component {
getChildContext() {
return { store: this.store }
}
constructor(props, context) {
super(props, context)
this.store = props.store
}
render() {
return Children.only(this.props.children)
}
}
React中有一个全局的context对象，各级组件间可以通过context通信。
通过Provider代码可知，这里实际是将Redux store对象绑定到React的context中，以此来把store应用到React中。
下列片段将React 组件用Provider组件包裹，传入了Redux store，返回一个高阶组件。高阶组件在渲染时，以包裹的子组件渲染。
<Provier store={store}>
<Container />
</Provider>
connect.js主要逻辑
connect是一个高阶函数，执行connect(select, actionCreators)(MyComponent)时，生产出一个经过包裹的Connect组件，该组件具有如下特点:
- 通过this.context获取store
- props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作为props传给真正的Component
- componentDidMount时，添加事件this.store.subscribe(this.handleChange)，使得Redux dispatch(action)后，触发回调
- shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextState
- componentWillUnmount时移除注册的事件this.handleChange
- 在非生产环境下，带有热重载功能
这里的关键点就在于，通过connect包裹的业务组件，向Redux store注册了监听器。在Redux流程中，dispatch(action)时，会检查当前store的监听器并依次触发，这样，就将React组件与Redux结合了起来。
connect.js代码较多，这里不贴出。注释版代码可参看 react-redux源码学习笔记
2.微信小程序中使用Redux
在微信小程序开发中，有一个全局的app.js，应用其他地方可以通过getApp()获得其引用。
结合React-Redux经验，不难想到，可以将Redux store绑定到全局的app.js中
state变更后，如何触发视图的刷新呢？与connect()方法中关键点类似，在page.js中，同样为Redux store注册监听器。这样，在dispatch(action)后，触发回调，刷新数据，重新渲染视图
示例如下
// actions.js
export const changeText = (text) => {
return { type: 'CHANGE_TEXT', text }
}
// reducers.js
export default {
myText(state = '', action) {
switch (action.type) {
case 'CHANGE_TEXT':
return action.text
default:
return state
}
}
}
//app.js中初始化Store，并放在App实例里以方便调用
//app.js
import { createStore, combineReducers } from './lib/redux.min'
import reducers from './reducers'
const Store = createStore(combineReducers(reducers))
App({
Store,
onLaunch: function () {
// ...
//page logs.js
const app = getApp()
const Store = app.Store
const dispatch = Store.dispatch
Page({
data: {
foo: ''
},
onLoad() {
this.unsubStore = Store.subscribe(() => {
const foo = Store.getState().myText
this.setData({ foo })
})
},
onUnload() {
this.unsubStore()
},
bindBtn() {
dispatch(changeText('new text'))
},
})
上述代码中，当触发dispatch(changeText('new text'))时，在Redux store dispatch方法中，会依次触发各个监听器，从而完成处理流程。
上述是一个简单的示例，无法实现React-Redux那样，通过connect方法对组件的包装。定制业务组件关注的state，并根据新旧state判断是否需要刷新视图。
这个wechat-weapp-redux 组件，基于React-Redux进行了微信小程序的改造，可以满足上述需求。
3.Redux Anywhere
至此，我们已经明白了在应用中使用Redux的关键点
- 将store绑定到一个单例全局对象中
- 业务组件中注册监听器，回调中处理数据更新逻辑
理解上述两点，便可以将Redux应用到任何应用中了。
参考文章
如果觉得有帮助，可以扫描二维码对我打赏，谢谢
