1. React有props和state: props意味着父级分发下来的属性【父组件的state传递给子组件  子组件使用props获取】,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化。
理解这个是理解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 的基础概念:

  1. Redux 的核心是一个 store。
  2. store 是一个 JavaScript 对象,通过 Redux 提供的 createStore(reducers) 方法创建。
  3. store 有两个核心方法: .getState() 和 .dispatch()。
  4. .getState() 返回一个 JavaScript 对象,代表 store 当前的状态。
  5. .dispatch() 接受一个 action 作为参数,将这个 action 分发给所有订阅了更新的 reducer。
  6. action 是一个 JavaScript 对象,通常包含了 type、payload 等字段,用于描述发生的事件及相关信息(使用 Redux 中间件可以让你 dispatch 其它类型的 action,此处不展开)。
  7. reducer 是一个 JavaScript 函数,函数签名为 (previousState, action) => newState,即接受 previousState 和 action 两个参数,根据 action 中携带的信息对 previousState 做出相应的处理,并返回一个新的 state。

转载于:https://www.cnblogs.com/itlyh/p/6057518.html

通俗易懂的理解 Redux(知乎)相关推荐

  1. [通俗易懂]深入理解TCP协议(下):RTT、滑动窗口、拥塞处理

    转自即时通讯网:http://www.52im.net/ 前言 此文为系列文章的下篇,如果你对TCP不熟悉的话,请先看看上篇<[通俗易懂]深入理解TCP协议(上):理论基础> . 上篇中, ...

  2. [通俗易懂]深入理解TCP协议(上):理论基础

    转自即时通讯网:http://www.52im.net/ 前言 TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的 ...

  3. 欧拉角死锁_刚体运动学最通俗易懂的理解万向节死锁

    在网上看了很多所谓的通俗易懂的理解万向节死锁的文章,甚至动画. 可能是我想象力有问题,实在是理解不了: 如果xyz表示机体坐标系,那机体坐标系永远不可能重合,也就不会出现第二种状态. 恰巧,我们刚看了 ...

  4. 理解 Redux 的最好方式,是自己写一个

    react-redux 是 React 生态中比较(如果不是最的话)流行的一种状态管理方式,而它所依托的 redux,继承了 flux 的衣钵,并且引入了单一数据源.state 为只读.只能通过纯函数 ...

  5. 【大话Java面试】-如何通俗易懂的理解Redis的回收算法LRU?

    如何通俗易懂的理解LRU算法? 1.LRU是什么? LRU全称Least Recently Used,也就是最近最少使用的意思,是一种内存管理算法,最早应用于Linux操作系统. LRU算法基于一种假 ...

  6. 02-CPU基础知识:通俗易懂方式理解主频、核心、线程、缓存、架构

    我们通常会将CPU比喻为人类的大脑,是计算机的核心硬件,决定了一台电脑的运算性能好坏.我们在选购CPU的时候,通常都会在网上查询处理器型号参数,主要是看主频.核心.线程.缓存.架构等参数,那么对于小白 ...

  7. 通俗易懂彻底理解十倍交叉验证法

    通俗易懂彻底理解10-fold cross-validation method(十倍交叉验证法) 十倍交叉验证法: 将所有数据分为十份,然后将每一份作为验证集,其他作为训练集来进行训练和验证.在这一过 ...

  8. 学习 redux 源码整体架构,深入理解 redux 及其中间件原理

    如果觉得内容不错,可以设为星标置顶我的公众号 1. 前言 你好,我是若川.这是学习源码整体架构系列第八篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是 ...

  9. 从源码理解Redux和Koa2的中间件机制

    Redux和Koa的中间件机制相关源码都很精简. 正文我将直接引用部分源码,并加以注释来帮助我们更清晰的理解中间件机制. Reudx redux的中间件机制在源码中主要涉及两个模块 内部的compos ...

最新文章

  1. 浅谈权限设计(来自深空老大)
  2. 上周那个 iPad还没送出去呢!
  3. Web Components是不是Web的未来
  4. Python使用matplotlib可视化时间序列季节图、使用季节图可以比较不同年份相同月份的数据差异、或者相同(年/月/周等)的时间序列在同一天的数据差异(Seasonal Plot)
  5. bzoj1212: [HNOI2004]L语言
  6. (网页)Uncaught ReferenceError: pageImport is not defined
  7. 办公自动化-发送邮件功能-无格式-有格式-带附件-0225
  8. 程序为什么非得装入内存再执行?
  9. 基于C++/Qt带有界面的四则运算生成程序
  10. Mysql解决死锁的问题,防止阻塞
  11. 所谓敏感(数字的敏感)
  12. 聚合直播源码原生播放器php分享,原生聚合直播搭建源码
  13. nanomsg应用中的问题整理
  14. FlashFXP,小编带你认识什么是FlashFXP软件
  15. url“forum.php,如何让discuz论坛首页打开不显示forum.php的方法分享
  16. endnote的enl文件格式_endnoteenl文件丢失(一步简单还原丢失文件)
  17. Es6里面的Set和Map集合
  18. Codeforces1379 B. Dubious Cyrpto(枚举)
  19. Win 98系统启动过程全揭密
  20. qt base64加解密

热门文章

  1. python 工作量统计_如何获得Python多处理池剩余的“工作量”?
  2. bfs--最小步数--青蛙
  3. 最长回文子序列与最长回文子串
  4. python强制跳出while循环_python如何跳出while循环
  5. Thread源码-----传实现了Runnable接口的类的实例给Thread的作用
  6. 官网opencv练习题 最简单的多物体分离技术
  7. matlab 计算矩阵a的离散余弦变换
  8. [工具] PicGo + Github 图床
  9. k8s优先级priority的使用
  10. matlab创建一个简易的MP3播放器GUI程序