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

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。
时间: 2024-10-05 23:26:40

通俗易懂的理解 Redux(知乎)的相关文章

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

作者:Wang Namelos链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. . React有props和state: props意味着父级分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化.理解这个是理解React和Redux的前提.2. 一般构建的R

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

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

理解Redux以及如何在项目中的使用

今天我们来聊聊Redux,这篇文章是一个进阶的文章,建议大家先对redux的基础有一定的了解,在这里给大家推荐一下阮一峰老师的文章: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html 对于基础部分我在这里稍微讲解一下 首先我们要知道我们为什么要使用Redux,我们在什么情况下才需要去使用Redux,在这里引用Redux的创造者的一句话:"只有遇到 React 实在解决不了的问题,你才需

脚本(script)——通俗易懂去理解

通俗易懂的让自己理解一下.以下是知乎中一位作者的回答,我认为非常易懂! 作者:知乎用户链接:https://www.zhihu.com/question/19901542/answer/13298706来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 假设你经常从网上下东西,全都放在 D 盘那个叫做 downloads 的文件夹里.而你有分类的癖好,每周都要把下载下来的图片放到 pic 文件夹里,pdf 放到 book 文件夹里,mp3 和 wma 文件放到 mus

XML——通俗易懂去理解

总能看见XML文件,自己也会用到,但是并没有办法深刻理解"可扩展标记语言"这几个字,网上查阅后依旧谢谢知乎! 作者:华子链接:https://www.zhihu.com/question/31353595/answer/60826602来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 简单概括(可能概括的不是很准确,但是我的语言功底也就到这了,见谅)的话就是,xml本身是一种格式规范,是一种包含了数据以及数据说明的文本格式规范. 接下来煮几个栗子说明一下.

史上最通俗易懂的理解云计算

"云计算"这三个字相信你一定听过无数遍了,那么我想问问你,"云计算"到底是什么?你能回答出来吗?首先我们听到云计算三个字时,感觉非常高大上,高不可测的,新技术等等,如果你没有接触过的,感觉离我们很远,很不生活化,不像滴滴打车这么生活化的应用软件. 目录导航: 1.云计算是什么 2.云计算是如何分类的 3.云计算有什么好处 4.云计算发展趋势如何 5."带头大哥"阿里云 6.我到底应该如何学习云计算 云计算是什么 官方解释:云计算是一种按使用量付费

Spring中AOP的一个通俗易懂的理解(转)

这是看到的一个最易懂得AOP简介了,适合初学者理解. 转自:http://www.verydemo.com/demo_c143_i20837.html 1.我所知道的aop 初看aop,上来就是一大堆术语,而且还有个拉风的名字,面向切面编程,都说是OOP的一种有益补充等等.一下子让你不知所措,心想着:怪不得很多人都和我说aop多难多难.当我看进去以后,我才发现:它就是一些java基础上的朴实无华的应用,包括ioc,包括许许多多这样的名词,都是万变不离其宗而已. 2.为什么用aop 1就是为了方便

深入理解Redux之手写React-Redux

React-Redux主要由两部分组成,一是Provider(提供者),顾名思义作用就是提供状态数据. 另一部分是connect函数,它的作用是把UI组件和状态数据“连接”起来,实现了Model和View的分离,也就是UI组件并不直接管理状态数据,而是只负责界面的展示. 通过connect函数可以获得一个容器组件的创建器,进而创建出容器组件,而容器组件又包含了UI组件,由于容器组件是可以获取到状态数据的,获取到之后再传给UI组件就可以实现UI组件和状态数据的连接. 下面我们先来实现第一部分——P

理解redux中间件

redux questions : 1. reducers 函数如何创建和聚合 2. action创建函数如何如何包裹在dispatch函数中 3. 如何给默认的dispatch方法增加中间件能力 middleware: (js context)中间件由函数组合的形式创建,实现与主要执行任务正交的功能. tips:类似的有装饰器模式 在 redux middleware 要装饰的主要功能是 dispatch 函数.dispatch 函数的主要功能是发送actions 给 reducer函数来产生