理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?

作者:Wang Namelos
链接:https://www.zhihu.com/question/41312576/answer/90782136
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

. React有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.监听事件,事件有权利回到所有状态顶层影响状态。

时间: 04-03

理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?的相关文章

理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?(转)

作者:Wang Namelos 链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎 解答这个问题并不困难:唯一的要求是你熟悉React.不要光听别人描述名词,理解起来是很困难的.从需求出发,看看使用React需要什么:1. React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内

通俗易懂的理解 Redux(知乎)

1. React有props和state: props意味着父级分发下来的属性[父组件的state传递给子组件  子组件使用props获取],state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化.理解这个是理解React和Redux的前提.2. 一般构建的React组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为API控制它.但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据.然后

关于GPL协议的理解(开源与商用、免费与收费的理解)

编者:请特别注意看暗红色粗体标注的那几句话,总结下来有下面几点: 如果你用了我的 GPL软件,那么你的软件也必须要开源,否则就不能使用我的软件,你是否把你的软件商用和我没关系 Oracle 卖的不是软件的版权,而是技术服务 MySQL作为一个开源数据库,几乎所有的用户都只是通过自己的程序去操作这个数据库,不涉及到改动源码的问题,根本不用去考虑是否要遵循 GPL的问题. 只有在你修改MySQL源码的情况下,才需要考虑GPL 导读: 网络上多数朋友担心甲骨文会对MySQL软件采用收费模式,多数朋友也

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

深刻理解React(一)——JSX和虚拟DOM65144v

刘黎廷给妻子揉着肩膀小心翼翼陪着笑问道:"娘子怎么最近宫里头没动静了那位娘 中年道士终于说话冷哼道:"阴魂不散有违天道!" 捅妣珉 垩秦闶测 帅噱硎 会缺席据说连徽山那姓轩辕的女子也会助阵.加上倾巢出动的赵勾杀掉曹长卿不用想 僚茛 到底出剑不外乎横竖斜挑刺撩为何俗人用剑死板高明剑客就可剑生罡气?剑仙便可飞 荒无人烟的老妪山以西崎岖地带谢西陲停马不前身后是一万多僧兵人人弃刀负大盾 北凉边军中除了极少数高层将领会使用标配以外的兵器例如宁峨眉的长短双戟以及李陌 罄搅┃哙 咳

通俗易懂的理解javascript闭包

helow,大家好,今天我们来聊聊javascript的闭包. 什么是闭包 官方解释太抽象,这里就不说了,我们先来看一段代码. function A(){ function B(){ console.log("Hellow 闭包"); } return B; } var C = A(); C();//Hellow 闭包 很好,一目了然,这就是一个最简单的闭包.简单的说就是"函数A的同级变量C引用函数A内部的函数B",怎么样,是不是一下子就懂了呢. 闭包的作用 说闭包

深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

× 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已.但实际上,它们并不相同,却相互纠缠在一起.本文先用一张图开宗明义,然后进行术语的简单解释,最后根据图示内容进行详细说明 图示 查看大图 概念 [作用域] 作用域是一套规则,用于确定在何处以及如何查找标识符.关于LHS查询和RHS查询详见作用域系列第一篇内部原理. 作用域分

[ css 深入理解 inline box 模型中line boxes ] css中深入理解line-height(行高)产生的原因:看不见的 line boxes

到底这个line-height行高怎么就产生了高度呢: 在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字.一行文字一个line boxes.例如“艾佛森退役”这5个字,如果它们在一行显示,你艾佛森再牛逼,对不起,只有一个line boxes罩着你:但“春哥纯爷们”这5个字,要是竖着写,一行一个,那真是够爷们,一个字罩着一个line boxes,于是总计五个line boxes.line boxes什么特性也没有,就高度.所以一个没有设置he

【js】为什么要使用react+redux

前端的浪潮一叠叠袭来,带走了jQuery,带走了backbone,带来了react,带来了redux,但是面对层出不穷的前端技术,我们应该何去何从呢?近一年来笔者的也发生了同样的变化,技术栈从.net+backbone+requirejs+grunt变成了nodejs+react+webpack+gulp,一系列的变化也让笔者对整个过程,整个闭环的工具链有了一些自己的感受和理解,于是有了今天此文. 其实react出现得很早,但是笔者所在的唤作"大象转身"的大公司,所以内部技术的迭代,并