Redux到底是什么?为什么我应该在我的React App中考虑它?

如果您有一个中心位置可以管理React应用程序的整个状态怎么办? 如果我告诉过您,在某个地方可以使用所有状态值而又不必担心在应用程序的组件树分解之后传递prop的复杂性该怎么办? 旁注,最后两个问题是以Morpheus的声音(《黑客帝国》的角色)提出的。

如果您像我一样,并且尝试在纯React中构建一个中等大小的应用程序,那么您可能会遇到管理应用程序全局状态的艰巨任务。 老实说,它可能会变得很凌乱。

认识Redux,这是我的工作同事向我介绍的第三方库。 从那时起,我再也没有回头。

Redux

如上所述,Redux是一个独立于React而存在的库,但由于它们协同工作的良好程度,经常被认为与Facebook流行的库结合使用。

工作原理:中央存储,动作和减速器

这家中央商店

从根本上讲,这都与每个Redux应用程序中的中央存储有关。 该中央存储存储应用程序的整个状态(或全局状态)。 如果要访问特定的状态值,可以通过将组件连接或订阅到商店来进行。 这些类型的组件将被称为智能组件(或容器)。 未连接到商店的组件称为Presentational Components。

该中央存储存储应用程序的整个状态(或全局状态)…

动作

Redux应用程序围绕某种类型的流运行。 在React的上下文中,该流程基本上将从调度Action的组件开始。 动作只是一个信息包,其类型(或唯一描述)可能包含也可能不包含有效负载。 听起来似乎很难理解,因为整个“类型”的东西都被扔了。 类型只是一个描述,例如“ LOGIN_SUCCESSFUL”或“ LOGIN_UNSUCCESSFUL”。 该描述是唯一的,描述性的,并且按照惯例通常在UPPER_SNAKE_CASE中使用。 附带的有效负载(如果有)可以简单地是一个布尔值,一个整数,一个字符串或一个对象,该对象将被传递给Reducer。

动作只是具有某种类型(或唯一描述)的信息包,其中可能包含也可能不包含有效载荷……

减速器

现在,动作实际上只是送货员,他们不会更新商店中的状态。 这由减速器处理。 通常,您有多个化简器,将它们组合在一起,最后得到一个直接连接到商店的根化器。 他们收到动作并根据其描述进行处理。 减速器接收动作和旧状态作为输入,然后产生新的更新状态。 它们是纯同步功能,没有副作用。

减速器接收动作和旧状态作为输入,然后产生更新状态…

Reducers吐出更新的状态时,它们将替换Central Store中的先前状态。 这必须以不变的方式完成,因此我们总是返回一个新状态,该状态基本上是一个新的JavaScript对象,该对象通常包含先前状态和新更新的状态的属性。

检索更新的状态

您可能会想:“好极了,我已经设法用新状态更新商店,但是如何将更新后的状态添加到组件中?”我们的工作流使用订阅模型。 每当状态更新时,中央存储都会触发所有订阅。 容器/智能组件可以订阅中央存储以获取更新,并且将自动以道具的形式接收更新。

这基本上是Redux工作流程,在大多数情况下(据我所知),它需要一些时间来适应。 尽管您可能要面对这个库所带来的挑战,但最终的好处还是值得的。

视觉辅助使任何冗长的描述都更容易理解,而且我敢肯定,有很多很好的图表来描述Redux工作流程,如果可以帮助您了解要点,则可以自己创建。

参考文献:

Redux· JS应用程序的可预测状态容器
JS Appsredux.js.org的可预测状态容器