这几天看 Redux 的资料看的简直发疯，每次都看到睡着。今天下午睡了整整 4 个小时，在今晚安静的时候攻坚了一下 Redux。幸亏网上有很多靠谱的资料，不然我也不知道何时能搞清楚 Redux 的作用。下面罗列一下相关资料：

周边资料

创建 webpack+react+redux 的项目模板

react-redux-starter-kit: https://github.com/davezuko/react-redux-starter-kit webpack-react-redux: https://github.com/jpsierens/webpack-react-redux

文字资料

react-redux-tutorial: https://github.com/lewis617/react-redux-tutorial react-pxq: https://github.com/nmgwddj/react-pxq Redux 中文文档：http://cn.redux.js.org/index.html 慕课网视频教程：http://www.imooc.com/learn/744 阮一峰 Redux 入门：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

自己的总结

  • 思考这个组件哪些数据要由 redux 来管理，在 counter 的案例中，counter 就是被管理的数据。可以先从 props 里面导出要被管理的变量，即使还没有，但先写好可以让自己思路更清晰。

  • 思考用户会产生哪些动作导致被管理的数据改变，比如 + - counter 的案例，+ - 就是动作，要实现成对应的 action，组成一个 actions 列表，并导出所有方法。同时在组件中也将这些方法的名字从 props 里面导出，即使现在还没有这些方法但先写出来可以让自己思路更清晰。

  • 创建组件对应的 container，使用 connect 来绑定 store 中的 state 和 dispatch 到组件中，让 state 在发生变化以后组件可以马上接收到变化。

  • 编写对应的 reducer，一个组件可以有一个对应的 reducer，一个 reducer 中可以有多种对应的操作，一个 action 对应一个操作，reducer 中就是操作的具体步骤，根据 type 来判断从而执行对应的操作。counter 案例中，counter 的加减操作就是做 reducer 中实现的。导出的多个 reducer 的名字再使用 redux 的 combineReducers 方法来进行整合，整合了多少个名字，那么在全局的 state 中就有多少个被维护的数据。访问时使用 state.counter、state.xxx 即可访问到指定的数据。Chrome 的 redux 插件也可以看到当前页面中 redux 的全局 state 中都有哪些被维护的数据。

  • 利用 reducers 的数据来创建 store，这里代码我还没研究清楚。

  • 最后在顶层的组件中用 Provider 把顶层组件包裹起来。