Redux 是一个 JavaScript 应用程序状态管理库，它使得管理应用程序的状态变得更加容易和可预测。Redux 可以帮助我们更好地维护大型应用程序，让我们能够更好地应对复杂的状态管理问题。
在本文中，我们将介绍 Redux 的主要概念、设计模式和 API，并提供一些示例代码来演示如何在实践中使用它。
Redux 的主要概念
Redux 的设计基于三个核心概念：状态、动作和 Redux 存储。
状态
状态是我们希望通过应用程序管理的所有数据。Redux 将应用程序状态表示为一个 JavaScript 对象，称为存储。在 Redux 应用中，状态是不可变的，这意味着您不能直接修改状态，而是以一种函数式的方式来操作状态。状态只能通过派遣（dispatch）一个动作（Action）来改变。
动作
动作描述了改变状态的意图。它通常包含一个字符串类型的“类型”属性和一些其他的数据，如 payload。动作是纯粹的、轻量级的对象，并没有任何副作用。任何应用程序中的操作，例如单击按钮、输入表单或定时器事件等都可以被表示为动作。
Redux 存储
Redux 存储是 Redux 应用程序的核心组件。它是一个可以从任何地方访问的 JavaScript 对象。存储拥有当前状态的完整副本，并负责处理派遣（dispatch）动作时的状态更新。当一个动作被派遣到存储中时，它会传递给存储中的一个纯函数，这个函数会基于当前的状态和传递进来的动作计算出一个新的状态。新状态会替换旧状态，这样就完成了状态更新。
Redux 设计模式
Redux 是基于 Flux 架构的，所以它遵循一些常见的设计模式。Redux 应用由以下组件组成：
Store
Redux 存储对象，拥有当前状态的完整副本。
Action
描述了应用程序中某种操作的对象。Action 是一个纯对象，它至少包含一个属性，表示操作的类型。
Reducer
一个纯函数，它接收当前状态和派遣的动作作为参数，并返回新的状态。Reducer 实现并维护应用程序状态的更新逻辑。
Middleware
Redux 中的中间件用于在派遣一个动作时，执行一些额外的逻辑，例如日志记录、异步操作和错误处理等。
Redux API
以下是 Redux 的核心 API。
createStore(reducer, [preloadedState], [enhancer])
该函数用于创建一个 Redux 存储。它接受 3 个参数：reducer、preloadedState 和 enhancer。reducer 是一个接收当前状态和动作的纯函数，用于更新状态；preloadedState 是一个可选参数，它表示应用程序的初始化状态；enhancer 也是一个可选参数，用于扩展 Redux 存储的功能。
store.dispatch(action)
该函数用于将动作派遣到 Redux 存储中。它接受一个单独的参数，即一个动作对象。动作对象必须包含一个类型属性，用于定义动作的类型。
store.subscribe(listener)
该函数用于注册一个监听器，当 Redux 存储中的状态被更新时，这个监听器会被调用。
combineReducers(reducers)
该函数用于将多个 reducer 函数合并成一个单独的 reducer 来更新 Redux 存储中的状态。它接受一个对象作为参数，这个对象的键对应着不同的状态片段，值则对应着与这些状态片段相关的 reducer 函数。
Redux 的简单示例
以下是一个简单的 Redux 应用示例。它展示了如何使用 Redux 存储、动作和 reducer。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---
------------------ -- -------------------------------运行这段代码，我们将得到如下的输出：
{ count: 1 }
{ count: 2 }
{ count: 1 }以上代码创建了一个 Redux 存储并定义了一个 reducer 函数。初始状态（initialState）包含一个名为 count 的数字属性，其默认值为 0。reducer 函数根据派遣的动作来更新状态。
在这个示例中，我们依次派发了 3 个动作 —— “INCREMENT” 和 2 个 “DECREMENT”，最后的状态被更新为 { count: 1 }。
我们还注册了一个订阅器，以便在状态更新时打印输出状态的当前值。
结论
Redux 提供了一种有效的方法来管理应用程序状态。它是一个可以扩展、可预测和易于维护的状态管理工具。在使用 Redux 时，我们需要了解其主要概念、设计模式和 API。希望本文对 Redux 的初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721e1f52e7021665e09314d