Redux 是一个流行的 JavaScript 应用程序状态管理库，它为应用程序的状态管理提供了可预测的方式。Redux 大大提高了应用程序的可维护性和可靠性。在 Redux 中，action 和 reducer 是状态管理中的核心概念，它们在应用程序中的使用非常重要。在这篇文章中，我们将深入了解 Redux 中的 action 和 reducer，并介绍如何灵活地维护它们。
Action
Action 是用于描述应用程序中发生的一些事件的 JavaScript 对象。每个 action 都包含一个类型和一些数据。它们通过调用一个函数来触发，并传递给 reducers 处理。在 Redux 中，action 是用来描述应用程序中被发起的一些事件的。例如，当用户点击按钮时，可以提交一个 action，向 Redux 发送信息，告诉它更新应用程序的状态。
一个简单的 action 示例代码：
const ADD_TODO = 'ADD_TODO'
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}上面的代码定义了一个 ADD_TODO 的 action 类型，并且定义了一个 addTodo 函数来创建一个新的 action。这个函数接收一个文本参数，然后使用这个文本参数来创建一个新的 action 对象。
Reducer
Reducer 是一个纯函数，用于根据当前状态和 action 来计算出新状态。它接收两个参数：一个旧状态和一个 action 对象，然后返回一个新状态。Reducer 通常返回一个新的对象或数组，以便在更新应用程序状态时不会更改原始状态。
一个简单的 reducer 示例代码：
-- -------------------- ---- -------
----- ------------ - -
------ --
-
-------- ----------------- - ------------- ------- -
------------------- -
---- -----------
------ -
------ ---------------- ------------
-
--------
------ -----
-
-上面的代码定义了一个最初状态为 todos 空数组的初始状态，并定义了一个 todoReducer 函数来根据 action 更新 todos 数组。当接收到 ADD_TODO 类型的 action 时，它将创建一个新的状态对象，其中包含旧的 todos 数组和一个新的 action.text 元素。如果 action 的类型不是 ADD_TODO，则返回旧状态。
灵活地维护 Action 和 Reducer
在应用程序中，我们需要根据实际情况来灵活地维护 action 和 reducer。以下是一些有用的技巧：
使用常量
我们通常使用常量来保存 action 的类型。这有助于避免拼写错误和代码重复。这可以通过在单独的常量文件中定义常量来实现，例如：
export const ADD_TODO = 'ADD_TODO';
拆分 reducer
我们通常将应用程序的状态保存在单个 reducer 函数中。但是，当应用程序变得复杂时，可以将 reducer 拆分为多个小的 reducer 函数，每个 reducer 函数处理应用程序状态的一部分。这有助于避免一个过大的 reducer 和复杂度。
使用 redux-thunk
redux-thunk 是一个非常有用的中间件，它允许 action 创建函数返回一个函数而不是一个对象。这使得我们可以在 action 中执行异步操作，例如 HTTP 请求。
使用 Reselect
Reselect 是一个受欢迎的选择器库，主要用于选择和转换应用程序状态。可以使用 Reselect 缓存结果，以避免重复性能消耗。
结论
在 Redux 中，action 和 reducer 是状态管理的核心概念。它们使应用程序的状态管理更加可预测，并提高了应用程序的可维护性和可靠性。这篇文章中，我们介绍了 action 和 reducer 的基本概念，并给出了灵活维护它们的一些技巧。我们希望这篇文章可以帮助你更好的理解 Redux，并在实际开发中使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbf9274471362601674218