首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Redux 学习笔记:创建一个用 Redux 管理的 React 组件流程

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

作者头像
我与梦想有个约会
发布2020-01-06 15:16:58
5930
发布2020-01-06 15:16:58
举报
文章被收录于专栏:jiajia_dengjiajia_deng

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

相关

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年4月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 周边资料
    • 创建 webpack+react+redux 的项目模板
      • 文字资料
      • 自己的总结
        • 相关
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档