Redux 是一种开源的 JavaScript 应用程序状态管理容器。通过将状态和状态变更显式地管理，Redux 使开发人员能够更容易地编写可测试和可维护的应用程序。本文将深入探究 Redux 的核心 Store 和 Action 模型，并通过示例代码详细介绍这些概念的实际应用。
Redux Store
Redux 应用程序中的 Store 是一个数据存储容器，用于管理状态。它维护着应用程序中所有的状态，并接受来自用户界面的 Action，以确定状态的变化。Store 通常被描述为单一的状态树，其中每个键值对表示应用程序的一部分状态。在 Redux 中，状态不能直接被修改，而是通过 Action 对象描述应用程序发生的变化。
创建 Redux Store
要创建一个 Redux Store，需要引入 Redux 库，并使用 createStore 方法定义 Store。
import { createStore } from 'redux';
const reducer = (state = {}, action) => {
// Reducer 代码
}
const store = createStore(reducer);在以上代码示例中，我们通过 createStore 方法创建了一个名为 store 的 Redux Store。它接收一个 reducer 函数 reducer，作为 Store 的参数。
Reducer 函数
Reducer 函数是 Redux 状态管理的核心。Reducer 函数接收两个参数：旧状态和 Action 对象。它计算一个新的应用程序状态，并将其返回。
Reducer 函数通常使用 switch 语句来根据 Action 类型更新状态。请看以下示例：
-- -------------------- ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-在以上示例中，Reducer 函数根据 Action 类型来更新状态。如果类型为 'INCREMENT'，则增加 count。如果类型为 'DECREMENT'，则减少 count。如果没有匹配到任何类型，则返回当前状态。值得注意的是，Reducer 必须是一个纯函数，它不应该直接修改旧状态，而是应该创建一个新的状态对象。
使用 Redux DevTools 调试 Store
调试 Redux Store 非常容易，只需使用 Redux DevTools 插件。在 Chrome DevTools 中，为了调试 Redux 应用程序，只需要安装 Redux DevTools，打开 Chrome DevTools，然后选择 Redux 标签来查看应用程序的状态及其变化历史。
Redux Action
Redux Action 是一个描述变化请求的对象。它包括两个主要属性：类型和负载。Action 对象的类型属性是一个字符串，用于描述应用程序的状态变化。负载是一个包含变化信息的任意对象。
创建 Redux Action
使用 Action 工厂函数来创建一个 Redux Action。工厂函数通常是一个简单的函数，它接收负载数据并返回一个 Action 对象。例如，让我们创建一个简单的 Action 工厂函数：
const incrementAction = () => {
return { type: 'INCREMENT' };
}
const decrementAction = () => {
return { type: 'DECREMENT' };
}在以上示例中，我们创建了两个 Action 工厂函数：incrementAction 和 decrementAction，它们返回 Action 对象 { type: 'INCREMENT' } 和 { type: 'DECREMENT' }，分别用于增加和减少应用程序的计数器。
更新 Redux Store
将 Action 对象传递给 Store 的 dispatch 方法是更新 Redux Store 的主要机制，如下所示：
store.dispatch(incrementAction()); store.dispatch(decrementAction());
在以上示例中，我们分别将 incrementAction 和 decrementAction 传递给 store.dispatch 方法，并使用它们来更新应用程序的状态。
实例：使用 Redux 存储 Todo 列表
现在，让我们通过一个示例来深入学习 Redux 中的 Store 和 Action。
假设我们正在构建一个 Todo 应用程序，需要存储一个 Todo 列表。要实现该功能，我们需要定义以下三个 Action：
-- -------------------- ---- ------- ----- ------- - ------ -- - ------ - ----- ----------- -------- - ---- - -- - ----- ---------- - ---- -- - ------ - ----- -------------- -------- - -- - -- - ----- ---------- - ---- -- - ------ - ----- -------------- -------- - -- - -- -
在以上示例中，我们使用三个 Action 工厂函数定义了添加 Todo、删除 Todo 和切换 Todo 状态的 Action，并将它们分别称为 addTodo、removeTodo 和 toggleTodo。
接下来，让我们创建一个 Reducer 函数来更新 Todo 状态：
-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - --- --------- ----- -------------------- ---------- ----- ---
---- --------------
------ ----------------- -- ------- --- -------------------
---- --------------
------ -------------- -- -
-- -------- --- ------------------ -
------ - -------- ---------- --------------- --
-
------ -----
---
--------
------ ------
-
-在以上示例中，我们创建了一个 Reducer 函数，该函数根据不同的 Action 类型更新 Todo 列表。例如，当 Action 类型为 'ADD_TODO' 时，我们将创建一个包含新 Todo 的新数组，并使用 ES6 扩展操作符添加该 Todo。当 Action 类型为 'REMOVE_TODO' 时，我们将从列表中过滤出该 Todo。当 Action 类型为 'TOGGLE_TODO' 时，我们将找到该 Todo 并切换其 completed 属性。
现在，我们可以使用 createStore 方法创建一个 Redux Store，并将 todoReducer 传递给该 Store 作为 Reducer 函数：
const store = createStore(todoReducer);
接下来，我们可以使用 store.dispatch 方法调度 Action 来更新应用程序的状态。例如，以下代码将使用 addTodo 和 toggleTodo Action 工厂函数向 Todo 列表中添加和删除 Todo：
-- -------------------- ---- ------- --------------------------- ------------- -------------------------- ----------- ------------------------------ ----------- ----- ----- - ----------------- ------------------- ---------------------------------------- ---------------------------------------- ------------------------------
在以上代码示例中，我们首先使用 addTodo Action 工厂函数向列表中添加了三个 Todo。接下来，我们将获取当前状态，打印出 Todo 列表。最后，我们分别使用 toggleTodo 和 removeTodo Action 工厂函数来改变 Todo 状态并从列表中删除 Todo。
结论
Redux 是一个理解前端状态管理的强大框架。在实践中，Redux 通过 Store 和 Action 概念将状态管理变得更加可预测和便于维护。这篇文章详细介绍了 Redux Store 和 Action 模型的实现方式，以及它们在前端中的使用示例。相信读完本文，你已经能够掌握 Redux 的核心概念，并开始实践前端状态管理了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672abfceddd3a70eb6d0ac42