zoukankan
html css js c++ java
如何使用React-redux
一、react-redux中 Provider 核心API
Provider就是一个组件,在Provider组件上通过store={ store }与provider组件进行了关联,因此在Provider内部的组件都可以获取到store里的内容
二、react-redux中 connect 核心API
1、Provider里面已经连接了store,因此TodoList组件里就有能力获取到store里的数据,就是通过connect这个方法获取store里的数据
2、图片中的connect引入应为 import { connect } from 'react-redux'
3、让我的TodoList和我的store连接(connect ),连接的规则有 mapStateToProps(把store里的数据映射给这个组件,变成这个组件的props,state指的就是store里的数据)
4、让我的TodoList和我的store连接,连接的规则有 mapDispatchToProps (把store.dispatch方法挂载到props上,)当需要修改state数据时就需要用到store.dispatch方法,如果运用react-redux就需要将store.dispatch方法映射到props上,就可以在input上调用props里的inpuChangeValue方法了,再将inputChangeValue方法写在mapDispatchToProps方法的内部
5、通过dispatch将action派发给store,store自动转发给reducer,reducer通过判断action的type类型,对state数据进行深拷贝,再将深拷贝的数据进行处理,处理后将新的newState值再转发给store
6、store里的数据变,页面自动就会跟着变,不需要再用调用之前的subscribe订阅了。
7、通过解构赋值语句简化值绑定和函数绑定时的写法
8、TodoList里面只渲染,无其他业务逻辑代码,所以这时候TodoList就可以写成一个无状态UI组件了
9、TodoList这个无状态UI组件(无其他业务逻辑代码的组件)通过connect连接并附有mapStateToProps、mapDispatchTpProps规则,通过export default导出为一个容器组件
今天你学习了吗!!!
查看全文
相关阅读:
次小生成树
乘法逆元(递推)
乘法逆元(快速幂)
带偏移量的并查集
Tarjan 强连通分量
Luogu_P2461 [SDOI2008]递归数列 【题解】 矩阵乘法
Luogu_P2243 电路维修【题解】 双端队列bfs
Luogu_ P2962 [USACO09NOV] 灯 【题解】 双向搜索
luogu_P2044【题解】 随机数生成器 矩阵乘法
luogu_P2054 bzoj 1965 洗牌 【题解】 快速幂 快速乘
原文地址:https://www.cnblogs.com/nayek/p/12390111.html
最新文章
数据结构实验之栈与队列三:后缀式求值
数据结构实验之栈与队列二:一般算术表达式转换成后缀式
前缀---中缀--后缀 表达式的相互转换
7-5 A除以B(10 分)
7-8 矩阵A乘以B (15分)
7-1 掉入陷阱的数字 (15分)
实验4-2-5 水仙花数 (20 分)
PTA 简单计算器(C语言)
图文混排
ios注册通知NSNotificationCenter(一)
热门文章
文字占位
使用Xcode和Instruments调试解决iOS内存泄露
深入浅出-iOS程序性能优化
重新调用 layoutSubview
iOS 架构模式--解密 MVC,MVP,MVVM以及VIPER架构
匈牙利算法(二分图匹配)
二叉查找树
单调队列
BSGS 大步小步算法
乘法逆元(扩展欧几里得)
Copyright © 2011-2022 走看看