Redux 学习笔记:创建一个用 Redux 管理的 React 组件流程

这几天看 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 把顶层组件包裹起来。

说说你的想法