首页 > 其他 > 详细

Redux的简单使用

时间:2019-11-07 16:29:25      阅读:85      评论:0      收藏:0      [点我收藏+]

使用react-redux,redux中放的都是组件

花蝴蝶在我身边围绕围绕,码代码我惟妙惟肖,还没抓到那诀窍

1.创建store

技术分享图片

 2.store中创建reducer

技术分享图片

3.返回store引入reducer

技术分享图片

 4.去掉Fragment

技术分享图片

            开始获取接口数据                

1.在哪里用就在哪里调用这个数据调用会用到connectconnect是react-redux中的高阶组件用于连接store

技术分享图片

 

 

2.在使用connect的组件中在创建一个mapprops.js文件在使用connect的组件中使用这是connect的两个参数先引入 

技术分享图片

 

 3.调用获取数据的方法(这个方法可肯定dispacth调用action)在使用数据的组件中的挂载后使用

技术分享图片

 

 4.开始发送action给了store在store中做中间件处理引入action所以创建action在action文件夹中创建一个actionCreator的js文件

技术分享图片

 

 5.异步请求数据在api文件夹创建一个js文件调取接口             

技术分享图片

 

 6.上方数据获取后发送reducer      

技术分享图片

 7.action发送过去后要reducer中使用

技术分享图片

 

完成以上操作可以渲染了,如果分组件写的话接的引入connect和mapprops更改mapprops.js文件更改为文件夹:

内容还是以前的内容因为好多地方要用所以更改

技术分享图片

 渲染:

如果是数组存的数据:在使用这个数据的组件中拿过来就好

技术分享图片

 

 如果是对象遍历渲染就可以了

技术分享图片

 

Redux的简单使用

原文:https://www.cnblogs.com/home-/p/11811535.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!