通俗易懂的理解 Redux(知乎)
理解这个是理解React和Redux的前提。
2. 一般构建的React组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为API控制它。但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据。
然后这时候不通过DOM沟通(也就是React体制内)解决的唯一办法就是提升state,将state放到共有的父组件中来管理,再作为props分发回子组件。
3. 子组件改变父组件state的办法只能是通过onClick触发父组件声明好的回调,也就是父组件提前声明好函数或方法作为契约描述自己的state将如何变化,再将它同样作为属性交给子组件使用。
这样就出现了一个模式:数据总是单向从顶层向下分发的,但是只有子组件回调在概念上可以回到state顶层影响数据。这样state一定程度上是响应式的。
4. 为了面临所有可能的扩展问题,最容易想到的办法就是把所有state集中放到所有组件顶层,然后分发给所有组件。
5. 为了有更好的state管理,就需要一个库来作为更专业的顶层state分发给所有React应用,这就是Redux。让我们回来看看重现上面结构的需求:
a. 需要回调通知state (等同于回调参数) -> action
b. 需要根据回调处理 (等同于父级方法) -> reducer
c. 需要state (等同于总状态) -> store
对Redux来说只有这三个要素:
a. action是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑。
b. reducer是一个匹配函数,action的发送是全局的:所有的reducer都可以捕捉到并匹配与自己相关与否,相关就拿走action中的要素进行逻辑处理,修改store中的状态,不相关就不对state做处理原样返回。
c. store负责存储状态并可以被react api回调,发布action.
当然一般不会直接把两个库拿来用,还有一个binding叫react-redux, 提供一个Provider和connect。很多人其实看懂了redux卡在这里。
a. Provider是一个普通组件,可以作为顶层app的分发点,它只需要store属性就可以了。它会将state分发给所有被connect的组件,不管它在哪里,被嵌套多少层。
b. connect是真正的重点,它是一个科里化函数,意思是先接受两个参数(数据绑定mapStateToProps和事件绑定mapDispatchToProps),再接受一个参数(将要绑定的组件本身):
mapStateToProps:构建好Redux系统的时候,它会被自动初始化,但是你的React组件并不知道它的存在,因此你需要分拣出你需要的Redux状态,所以你需要绑定一个函数,它的参数是state,简单返回你关心的几个值。
mapDispatchToProps:声明好的action作为回调,也可以被注入到组件里,就是通过这个函数,它的参数是dispatch,通过redux的辅助方法bindActionCreator绑定所有action以及参数的dispatch,就可以作为属性在组件里面作为函数简单使用了,不需要手动dispatch。这个mapDispatchToProps是可选的,如果不传这个参数redux会简单把dispatch作为属性注入给组件,可以手动当做store.dispatch使用。这也是为什么要科里化的原因。
做好以上流程Redux和React就可以工作了。简单地说就是:
1.顶层分发状态,让React组件被动地渲染。
2.监听事件,事件有权利回到所有状态顶层影响状态。
- Redux 的核心是一个 store。
- store 是一个 JavaScript 对象,通过 Redux 提供的 createStore(reducers) 方法创建。
- store 有两个核心方法: .getState() 和 .dispatch()。
- .getState() 返回一个 JavaScript 对象,代表 store 当前的状态。
- .dispatch() 接受一个 action 作为参数,将这个 action 分发给所有订阅了更新的 reducer。
- action 是一个 JavaScript 对象,通常包含了 type、payload 等字段,用于描述发生的事件及相关信息(使用 Redux 中间件可以让你 dispatch 其它类型的 action,此处不展开)。
- reducer 是一个 JavaScript 函数,函数签名为 (previousState, action) => newState,即接受 previousState 和 action 两个参数,根据 action 中携带的信息对 previousState 做出相应的处理,并返回一个新的 state。
转载于:https://www.cnblogs.com/itlyh/p/6057518.html
通俗易懂的理解 Redux(知乎)相关推荐
- [通俗易懂]深入理解TCP协议(下):RTT、滑动窗口、拥塞处理
转自即时通讯网:http://www.52im.net/ 前言 此文为系列文章的下篇,如果你对TCP不熟悉的话,请先看看上篇<[通俗易懂]深入理解TCP协议(上):理论基础> . 上篇中, ...
- [通俗易懂]深入理解TCP协议(上):理论基础
转自即时通讯网:http://www.52im.net/ 前言 TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的 ...
- 欧拉角死锁_刚体运动学最通俗易懂的理解万向节死锁
在网上看了很多所谓的通俗易懂的理解万向节死锁的文章,甚至动画. 可能是我想象力有问题,实在是理解不了: 如果xyz表示机体坐标系,那机体坐标系永远不可能重合,也就不会出现第二种状态. 恰巧,我们刚看了 ...
- 理解 Redux 的最好方式,是自己写一个
react-redux 是 React 生态中比较(如果不是最的话)流行的一种状态管理方式,而它所依托的 redux,继承了 flux 的衣钵,并且引入了单一数据源.state 为只读.只能通过纯函数 ...
- 【大话Java面试】-如何通俗易懂的理解Redis的回收算法LRU?
如何通俗易懂的理解LRU算法? 1.LRU是什么? LRU全称Least Recently Used,也就是最近最少使用的意思,是一种内存管理算法,最早应用于Linux操作系统. LRU算法基于一种假 ...
- 02-CPU基础知识:通俗易懂方式理解主频、核心、线程、缓存、架构
我们通常会将CPU比喻为人类的大脑,是计算机的核心硬件,决定了一台电脑的运算性能好坏.我们在选购CPU的时候,通常都会在网上查询处理器型号参数,主要是看主频.核心.线程.缓存.架构等参数,那么对于小白 ...
- 通俗易懂彻底理解十倍交叉验证法
通俗易懂彻底理解10-fold cross-validation method(十倍交叉验证法) 十倍交叉验证法: 将所有数据分为十份,然后将每一份作为验证集,其他作为训练集来进行训练和验证.在这一过 ...
- 学习 redux 源码整体架构,深入理解 redux 及其中间件原理
如果觉得内容不错,可以设为星标置顶我的公众号 1. 前言 你好,我是若川.这是学习源码整体架构系列第八篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是 ...
- 从源码理解Redux和Koa2的中间件机制
Redux和Koa的中间件机制相关源码都很精简. 正文我将直接引用部分源码,并加以注释来帮助我们更清晰的理解中间件机制. Reudx redux的中间件机制在源码中主要涉及两个模块 内部的compos ...
最新文章
- 浅谈权限设计(来自深空老大)
- 上周那个 iPad还没送出去呢!
- Web Components是不是Web的未来
- Python使用matplotlib可视化时间序列季节图、使用季节图可以比较不同年份相同月份的数据差异、或者相同(年/月/周等)的时间序列在同一天的数据差异(Seasonal Plot)
- bzoj1212: [HNOI2004]L语言
- (网页)Uncaught ReferenceError: pageImport is not defined
- 办公自动化-发送邮件功能-无格式-有格式-带附件-0225
- 程序为什么非得装入内存再执行?
- 基于C++/Qt带有界面的四则运算生成程序
- Mysql解决死锁的问题,防止阻塞
- 所谓敏感(数字的敏感)
- 聚合直播源码原生播放器php分享,原生聚合直播搭建源码
- nanomsg应用中的问题整理
- FlashFXP,小编带你认识什么是FlashFXP软件
- url“forum.php,如何让discuz论坛首页打开不显示forum.php的方法分享
- endnote的enl文件格式_endnoteenl文件丢失(一步简单还原丢失文件)
- Es6里面的Set和Map集合
- Codeforces1379 B. Dubious Cyrpto(枚举)
- Win 98系统启动过程全揭密
- qt base64加解密
热门文章
- python 工作量统计_如何获得Python多处理池剩余的“工作量”?
- bfs--最小步数--青蛙
- 最长回文子序列与最长回文子串
- python强制跳出while循环_python如何跳出while循环
- Thread源码-----传实现了Runnable接口的类的实例给Thread的作用
- 官网opencv练习题 最简单的多物体分离技术
- matlab 计算矩阵a的离散余弦变换
- [工具] PicGo + Github 图床
- k8s优先级priority的使用
- matlab创建一个简易的MP3播放器GUI程序