-
如何使用React-redux
一、react-redux中 Provider 核心API
Provider就是一个组件,在Provider组件上通过store={ store }与provider组件进行了关联,因此在Provider内部的组件都可以获取到store里的内容
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301150428593-227723307.png)
二、react-redux中 connect 核心API
1、Provider里面已经连接了store,因此TodoList组件里就有能力获取到store里的数据,就是通过connect这个方法获取store里的数据
2、图片中的connect引入应为 import { connect } from 'react-redux'
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301151122109-1280294510.png)
3、让我的TodoList和我的store连接(connect ),连接的规则有 mapStateToProps(把store里的数据映射给这个组件,变成这个组件的props,state指的就是store里的数据)
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301151645370-1029657365.png)
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301154127305-445630591.png)
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301152755411-952696650.png)
5、通过dispatch将action派发给store,store自动转发给reducer,reducer通过判断action的type类型,对state数据进行深拷贝,再将深拷贝的数据进行处理,处理后将新的newState值再转发给store
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301153147019-290909235.png)
6、store里的数据变,页面自动就会跟着变,不需要再用调用之前的subscribe订阅了。
7、通过解构赋值语句简化值绑定和函数绑定时的写法
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301160019575-1704875136.png)
8、TodoList里面只渲染,无其他业务逻辑代码,所以这时候TodoList就可以写成一个无状态UI组件了
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301160403475-1958964677.png)
9、TodoList这个无状态UI组件(无其他业务逻辑代码的组件)通过connect连接并附有mapStateToProps、mapDispatchTpProps规则,通过export default导出为一个容器组件
![](https://img2018.cnblogs.com/blog/1834003/202003/1834003-20200301160751278-1792754771.png)
今天你学习了吗!!!
-
相关阅读:
PHP双向队列
[转]数据库查询的3个优化方法
MySQL性能测试工具 mysqlslap
PHP各种魔术方法测试
VBA中级班课时3小结
VBA中级班课时1小结
执行cmd并返回程序结果
Update Dataset data back to Database
终于会用c#中的delegate(委托)和event(事件)了
c#: Enqueued event for Queue<T>
-
原文地址:https://www.cnblogs.com/nayek/p/12390111.html
Copyright © 2020-2023
润新知