优雅的在React项目中使用Redux

原创 年树先生 随笔 前端技术 11516阅读 12 天前 举报

或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处
原文:https://my.oschina.net/u/4018697/blog/2873564

首先我们会用到哪些框架和工具呢?
React
UI框架
Redux
状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux
react-redux
React插件,作用:方便在React项目中使用Redux
react-thunk
中间件,作用:支持异步action

准备工作
第1步:提供默认值,既然用Redux来管理数据,那么数据就一定要有默认值,所以我们将state的默认值统一放置在state.js文件:

第2步:创建reducer,它就是将来真正要用到的数据,我们将其统一放置在reducers.js文件

第3步:创建action,现在我们已经创建了reducer,但是还没有对应的action来操作它们,所以接下来就来编写action

最后一步:创建store实例

至此,我们已经完成了所有使用Redux的准备工作,接下来就在React组件中使用Redux

开始使用
首先,我们来编写应用的入口文件APP.js

最后是我们的组件:Test.jsx

Redux三大原则

单一数据源
整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中
State 是只读的
唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象
使用纯函数来执行修改
为了描述 action 如何改变 state tree ,你需要编写 reducers

结语
感谢您的观看,如有不足之处,欢迎批评指正。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复