深入解析React-redux插件入门

原创 年树先生 随笔 JavaScript 19954阅读 20 天前 举报

react-redux是使用redux开发react时使用的一个插件,另外插一句,redux不是react的产品,vue和angular中也可以使用redux;下面简单讲解,如何使用react-redux来开发react。

描述
这个插件可以让我们的redux代码更加的简洁和美观。我假设你已经有一个使用create-react-app创建的一个可以显示hello world的react环境,并且已经安装来redux。
注意:如果是刚使用create-react-app创建的,需要运行 npm run eject弹出个性化设置,这样就可以自定义配置
安装

使用
react-redux提供了两个重要的接口:Provider、connect,使用了这个插件,react-redux的subscribe和dispatch就可以忘记来,它们就用不着了。
代码结构

Provider中应用的最外层,把store传给它,只使用一次

connect负责从外部获取组件需要的参数。通过connect定义后,放到props中的属性和方法就可以直接通过this.props来获取。
下面是reducer的定义。

使用装饰器优雅的写Conect
首先需要安装babel-plugin-transform-decorators-legacy,并在package.json中配置。
安装
npm i babel-plugin-transform-decorators-legacy --save-dev 这个只是开发使用,所以安装到--save-dev
配置
配置babel的plugins属性

修改原来写法
使用@connect来重新定义,写到class的上头即可。

VS Code 装饰器提示“experimentalDecorators”的解决办法
点击Visual Studio Code左下角的配置按钮(或者文件>首选项>配置,Windows环境),打开用户设置窗口,在搜索框内输入“experimentalDecorators”,找到选项,如下:

结语

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

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

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

赶紧努力消灭 0 回复