看了就学会之React redux入门示例

原创 年树先生 随笔 JavaScript 8500阅读 10 天前 举报

本篇文章主要介绍了react redux入门示例,现在分享给大家,也给大家做个参考。如有不足之处,欢迎批评指正。

环境准备
为了方便,这里使用create-react-app搭建react环境

弹出配置

如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来。

安装redux

简单理解

redux简单用法就是通过它的store来订阅和发布信息。

通过subscribe来订阅action,通过dispatch来触发action。reducer中定义来各个action要做的事情。

demo代码

reducer定义

入口文件index.js

App.js

通过store的dispatch来触发action,index.js中订阅的事件就会执行。

redux的异步执行

redux中如果需要执行异步操作,需要安装react-thunk插件

同时需要redux插件的applyMiddleware

关键代码

设置其实很简单,创建store时,把thunk传递给它就行了。

在app.js中增加一个触发异步操作的按钮,reducer中已经定义了一个异步的方法。

异步调用方法会返回一个有两个参数的方法,两个参数都是函数,第一个是dispatch函数,第二个是getState函数。
dispatch触发action,getState获取state的值。

在app.js中增加代码

结语

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

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

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

赶紧努力消灭 0 回复