通俗易懂地理解Redux

通俗易懂的理解Redux

最近在学习React在学习到有关Redux的状态管理的时候真的是看了好久但仍是不能说了解的很透彻，通过看了不少篇文章才逐渐对Redux作到了有所了解，但愿能够经过这篇文章让更多不懂Redux的同窗可以理解它，也算是有所做用了，可会被说标题党了吧。（逃

虽然咱们能够经过Redux的官方文档能够得知，它是一个JavaScript状态容器，因此他并非只能和React配合使用，但咱们仍是要先了解React—这个它最常被使用到的场景。

官方文档内容:

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

可让你构建一致化的应用，运行于不一样的环境（客户端、服务器、原生应用），而且易于测试。不只于此，它还提供 超爽的开发体验.

Redux 除了和 React 一块儿用外，还支持其它界面库。 它体小精悍（只有2kB，包括依赖）。

了解需求

第一步，咱们先去探索Redux是在什么状况下被编写出来解决什么问题的，知己知彼，方能百战不殆。首先咱们先来看下React的特色:

• React 中有两个重要的特性: props和state, props 是父级向下分发的属性，而 state 则是组件内部本身管理的状态，而且 React 的数据流是自项而下的,它不存在向上传递数据的能力，由于这个特性， React 的数据只可以单向地向下分发或者内部消化。

  举个例子来讲的话：React 的数据源是一条河的源头，它(数据)汇聚成河流向下游地区流动，每一个地区用水（数据）时只能获得上游流下来的水（props）以及本身经过水库存的水（state），而上游却不能让河流逆流来获得下游的水资源。

• 一般地，咱们构建的一个 React 组件即实现了某种功能，能够称做完整的应用，它有良好的父子关系，数据在这种良好的关系中有秩序的单向流动，但当咱们想让两个同级的组件相互交流时，咱们发现他们没法直接进行交互。BTW， 咱们能够经过 DOM 来解决这个问题，可这就违背了咱们使用 React 的指望（尽可能地减小直接对 DOM 的操做），咱们能够经过提高State来解决这个问题，咱们将两个组件要用的数据放在他们的共同父组件中，而后经过这个父组件 props 分发给两个组件。

• 此时子组件想要改变父组件的 state 就须要经过 onClick, onChange 等来触发父组件声明好得回调，因此至关于父组件要提早声明好方法来肯定如何改变state, 而后将改变好的state做为属性交付给子组件使用，这样就完成了一次组件间的交互。（概念上的响应）

  可能听了上面的说明，你仍是云里雾里的，那么下面我经过一个例子来说解这个概念：

  ​ 咱们假设一个完整的 React 应用是一所学校，一个学生 （组件） 想向他的同桌（同级组件）说下一节是上物理课，可是他不能直接告诉他（不能够同级组件直接交互），他必须先向他们的班主任（共同的父组件）说：“下一节上物理课”，老师记在了本身的笔记本（state）上，而后老师向每一位同窗发放一张纸（props），上面写着 ”下一节上物理课“，此时他的同桌就知道了，”哦，原来下一节是物理课。“

  ​ 但是有时也有多是一个班的同窗想向另外一个班的同窗传达某个信息，或者一个班的同窗想向另外一个班的老师传达某个信息，这个时候咱们找谁呢？哦，咱们想到了学校的掌管者——校长（顶级父组件），此时，一个同窗向校长反应了一个状况，校长向全校的师生每人发了一个文件，上面写着这个状况，这个同窗想传递信息的另外一个同窗或者老师就获取到了这个信息。

Redux的出现

为了更好地管理state，咱们须要一个库来做为专业的顶层 state 分发给所全部的组件， Rudex 出现了。

先来介绍如下 Redux 的主要内容：

• action： 回调向state发起通知 => 回调的参数

  action 是一个纯的声明，它只提供事件的参数，但不提供任何的逻辑。

• reducer：根据回调进行处理state => 至关于以前在父级中提早声明好的方法

  reducer 是一个匹配函数， action 在发送时是发向全局的，因此全部的reducer都会接受到这个action，以后他会判断这个 action 是否与本身相关，相关就拿走 action 中提供的参数进行逻辑处理来修改 store；若不相关，就什么也不作。

• store：就是顶层父级的 state => 全部组件的总状态

  负责存储状态，至关于大脑，它能够被 React api 回调，经过dispatch方法发布 action。

咱们接着那个学校的例子讲：

​ 但校长日常就有不少事情要处理，若天天大大小小的事情都要校长亲自处理，确定是要忙不过来的，因而校长请了一位专业的人员来管理——教导主任（Redux）。教导主任上任便进行了改革：首先，不在把全部的东西都存在校长那里了，先解放了校长的劳累，而是存在教导主任的信息库（store）里。其次，确立了公文格式，不论谁向教导主任汇报信息，都要按格式发公文（action）来确保统一性。再者， 成立了不少部门（reducer），管理不一样的事务，教导主任接到公文（action）会向全部的部门发送，有关部门看到这个事情是本身管的就去处理，而后向教导主任处的信息库进行数据修改，不是则什么也不作，等待其余通知。

​ 果不其然，自从教导主任接手后，学校的管理更加的有秩序有效率，校长也有空去处理更大的事务，整个学校（React 应用）井井有理地运行着。

优化的应用 react-redux

在咱们的平常应用中，咱们通常不会直接使用两个库，而是使用一个 Redux 提供的 React 绑定库 —— react-redux。

react-redux 向咱们提供了两个东西：

• Provider 是react-redux向咱们提供的用来做为 顶层组件 的普通组件。它只须要一个属性——store,用来存放咱们的顶层 state 而后将它分发给全部 connect 的组件，不论它在哪儿。

• connect 是一个柯里化（Currying）的函数，它先要接受两个参数：（数据绑定mapStateToProps 和 事件绑定 mapDispatchToProps），再接收一个参数，就是要绑定的组件自己。

  柯里化：它是把接收的多个参数的函数转换成接收单一参数的函数的操做。它返回接收余下的参数而且返回结果的新函数。

  更多有关柯里化的内容能够看这篇文章，这里就不作细致的论述了。

  [翻译]JavaScript中的柯里化（Currying in JavaScript）

  • mapStateToProps 当咱们构建好 Redux 的应用时，它会自动初始化，但是咱们的 React 组件不知道它的存在，此时咱们分拣出咱们须要的 Redux 状态中的内容，咱们经过绑定一个函数（参数为state来返回咱们须要的几个值）
  • mapDispatchToProps 咱们能够用已经声明过的 action 做为回调，以后注入到组件里，它的参数是 dispatch ，经过 redux 的辅助方法bindActionCreator绑定全部的 action 以及参数的 dispatch，就能够在组件里面做为函数简单使用，就不须要手动 dispatch。这个参数是可选的，若是不传 redux 就会简单的把 dispatch 做为属性诸如给组件，手动当 store.dispatch 使用。

接着学校的例子讲：

​ 在高度信息化的今天，教导主任提议，咱们也应该响应信息化（react-redux），因而在校长的支持下，学校接入了信息化管理平台（Provider），在这个平台上存储有全部以前在教导主任处存储的信息（store），而后他会向每个连上网络（connect）的教职工发放信息（state）。若是没有连上网络（connect），教职工是没法访问到信息平台的，也就不能获取平台发布的信息。可是因为有些人同窗天天要看教育信息，而有的管理人员要看政务信息，若是都一股脑的把全部信息发给这些人就会很麻烦，因此教导主任决定，学生们连入学生网，管理人员接入政务网，学生网设置他只获取信息库中的教育信息（mapStateToProps），而政务网设置他只获取信息库中的政务信息（mapStateToProps）。信息管理平台为了更加有秩序的管理教职工的公文发布（action），因此它提早设置了几种提事务的类型为教材事务申报、维修事务申报、学籍事务申报等（mapDispatchToProps），提哪一种事务就会直接自动提交到有关部门，不须要部门人员一个一个去看是否是和本身部门相关的了，从教职工到有关部门的工做人员的办事效率都提升了，全校师生不由赞叹：信息化真好。

虽然这个例子可能不是很合适，但我尽量的用通俗易懂的方式讲解了redux的逻辑与内容，相信不懂的你可以有所感悟，而已经懂了的你会有更深一步的认识。：）

小结

作个简短的总结吧，Redux 说白了就是作了两件事：

1. 做为最顶级的组件，向子组件们分发状态，来让 React 组件响应式地渲染。
2. 监听子组件的回调，事件有权利回到最顶层影响顶层状态。

参考文献：

理解 React，但不理解 Redux，该如何通俗易懂的理解 Redux？ ——Wang Namelos

Redux官方文档