Redux 是一个开源的 JavaScript 状态容器，它可以管理应用程序的状态。它通过提供一种可预测的状态管理模式来解决应用程序中复杂的状态管理问题。Redux 被广泛应用于 React 和其他前端框架中。
Redux 的核心概念包括：store，action，reducer。它们之间的交互构成了 Redux 的工作原理。本文将分别介绍这些概念，并通过实例代码演示 Redux 的基本使用方法。
Store
Store 是 Redux 中管理状态的容器。它包含了应用程序的所有状态，并通过一些 API 提供访问这些状态的方法。在 Redux 中，Store 是唯一的。
创建 Redux Store 的方法如下：
import { createStore } from 'redux';
const reducer = (state, action) => {
// 状态处理逻辑
};
const store = createStore(reducer);上述代码中，我们使用了 createStore 方法创建了一个新的 Store。该方法需要一个参数，即 reducer，用于定义所有状态的处理方法。
Action
Action 是 Redux 中发起状态更改的事件。它是一个普通的 JavaScript 对象，包含了一个 type 属性。type 属性表示了这个 Action 事件的类型，用于告知 Reducer 如何处理该事件。
创建 Action 的方法如下：
const ADD_ITEM = 'ADD_ITEM';
const addItem = (item) => {
return { type: ADD_ITEM, payload: item };
};上述代码中，我们创建了一个名为 ADD_ITEM 的新的 Action 事件，并定义了一个 addItem 函数，用于创建 ADD_ITEM 类型的 Action。该函数的返回值是一个包含 type 和 payload 属性的对象。type 属性为 ADD_ITEM，payload 属性为传入的 item 参数。
Reducer
Reducer 是 Redux 中处理 Action 事件的函数。它根据 Action 的类型返回新的应用程序状态。Reducer 是纯函数，即在相同的输入下始终会返回相同的输出。
创建 Reducer 的方法如下：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------------------- -
---- ---------
------ -
---------
------ ---------------- ---------------
--
--------
------ ------
-
--上述代码中，我们定义了一个新的 reducer 函数，它包含了应用程序的状态逻辑。该函数接受两个参数：state 和 action。初始状态通过 initialState 定义。在 switch 语句中，我们将根据不同的 Action 类型返回不同的状态。在这个例子中，我们处理了一个名为 ADD_ITEM 的 Action。当 Action 类型为 ADD_ITEM 时，我们将返回一个包含了所有 state 属性和一个新的 items 属性的对象。
示例代码
下面是一个基本的使用 Redux 的示例代码。它演示了如何创建一个 Store，初始化状态和触发一个 Action：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- -------- - -----------
----- ------- - ------ -- -
------ - ----- --------- -------- ---- --
--
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------------------- -
---- ---------
------ -
---------
------ ---------------- ---------------
--
--------
------ ------
-
--
----- ----- - ---------------------
------------------ -- -
------------------------------
---
------------------------ ----- -------- ------ ---- ----上述代码创建了一个新的 Store，并定义了一个 addItem 函数用于创建 Action。通过 store.subscribe 方法，我们可以监听 Store 中状态的改变。store.dispatch 方法用于触发一个 Action，执行并输出 Store 的状态。
总结
Redux 是一个非常强大的状态管理工具，它帮助我们更好地组织应用程序的状态和行为。本文介绍了 Redux 的核心概念：Store，Action 和 Reducer。我们还通过示例代码演示了如何使用 Redux。在使用 Redux 进行状态管理时，我们应该始终遵循其核心概念，并确保我们的应用程序的状态管理逻辑清晰可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460700d968c7c53b021e98c