Redux 是一个流行的状态管理库，它将应用程序状态存储在一个单一的 JavaScript 对象中，并提供了一些工具来声明性地更新该状态。Redux 通过 reducers 处理应用程序中的不同状态变化，而 action creators 则负责触发这些状态变化。
然而，在复杂的应用程序中，reducers 和 action creators 的逻辑可能会交织在一起，导致难以维护的代码。因此，本文将介绍如何将 reducers 和 action creators 的逻辑进行分离，以帮助您编写更清晰、更可维护的代码。
Reducers 和 Action Creators 的职责
在深入讨论如何分离 reducers 和 action creators 的逻辑之前，我们需要明确 reducers 和 action creators 的职责。
Reducers
Reducers 负责处理应用程序状态的变化。当 action 被分派到 reducer 时，reducer 将根据 action 类型执行相应的操作并返回新的应用程序状态。
以下是一个简单的 reducer 示例，用于处理 "ADD_TODO" 动作类型：
----- ------------ - -
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ---------------
--
--------
------ ------
-
-Action Creators
Action creators 是纯 JavaScript 函数，它们负责返回 action 对象。这些对象包含有关应用程序状态变化的信息，例如操作类型和有效载荷。
以下是一个简单的 action creator 示例，用于创建 "ADD_TODO" 动作类型：
-------- ------------------- -
------ -
----- -----------
-------- ----
--
-将 reducers 和 action creators 的逻辑分离
为了将 reducers 和 action creators 的逻辑分离，我们需要遵循一些最佳实践。
1. 单一职责原则
单一职责原则是指一个函数或对象应该只做一件事情。在 Redux 中，reducers 应该只处理与应用程序状态相关的逻辑，而 action creators 应该只返回与应用程序状态变化相关的 action 对象。
2. 抽象通用逻辑
如果您发现多个 reducers 或 action creators 共享相似的逻辑，则可以将该逻辑提取到单独的函数或模块中，并在需要时重用它。
3. 使用辅助函数
Redux 提供了一些辅助函数，例如 combineReducers 和 bindActionCreators，可帮助将 reducers 和 action creators 的逻辑进行分离。
combineReducers 函数允许您将多个 reducers 组合成一个单一的 reducer，从而使代码更易于维护。例如，以下代码将两个 reducers 组合成一个 rootReducer：
------ - --------------- - ---- -------- ------ ----------- ---- ---------------- ------ ----------- ---- ---------------- ----- ----------- - ----------------- ------ ------------ ----- ----------- --- ------ ------- ------------
bindActionCreators 函数可用于将多个 action creators 绑定到 dispatch 函数上。这有助于避免在组件中编写重复的代码。例如，以下代码使用 bindActionCreators 将两个 action creators 绑定到 dispatch 上：
------ - ------------------ - ---- --------
------ - -------------- ---------------- - ---- ----------------
-------- ---------------------------- -
------ -------------------
-
-------- --------------
----------- ----------------
--
--------
--
-示例代码
以下是一个示例应用程序，其中包含一个 reducer 和一个 action creator。我们将演示如何将它们的逻辑分离。
首先，让我们定义一个简单的 reducer，用于处理 "INCREMENT_COUNTER" 和 "
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30007