消除 Redux 中重复代码的技巧
Redux 是一种流行的 JavaScript 应用程序状态管理工具，它提供了一种有效的方法来管理应用程序中的状态。然而，Redux 并不是完美的，其中一个主要问题是重复代码。在大型 Redux 应用程序中，开发者通常需要编写大量的模板代码来完成通用的状态管理，这使得代码显得冗长难懂。本文将介绍如何消除 Redux 中的重复代码。
- actionCreators
在 Redux 中，一个 reducer 可能会处理多个 action。通常，每个 action 都需要定义一个 action creator 函数用于创建 action。这使得我们需要编写大量的 action creator 函数，这些函数通常具有相似的结构和语法。我们可以通过一个工具函数来简化这个过程。
-- -------------------- ---- -------
-------- ----------------------------- -
----- -------------- - ---
-------------------------------------- ------- -- -
------------------- - -- -- -- ----- ----- ---
---
------ ---------------
-
----- ------- - -
--------- -----------
------------ --------------
--
----- -------------- - ------------------------------在上面的代码示例中，我们定义了一组 actions。然后，我们创建了一个 createActionCreators 函数，该函数接受 actions 对象作为参数，并迭代该对象来创建一个 actionCreators 对象。最后，我们使用 createActionCreators 函数来创建了一个 actionCreators 对象。
使用 actionCreators 对象的好处是，我们不再需要手动为每个 action 创建一个 action creator 函数。相反，我们只需要在需要一个 action 的地方使用 actionCreators 对象即可。
- reducers
在 Redux 世界中，reducer 是我们的单一 source of truth。尽管我们可能具有许多独立的 reducer 函数，但 reducer 经常共享相似的行为和逻辑。为此，我们可以创建一个高阶 reducer 增强器函数，该函数将纯函数转换为更具通用性和可重用性的 reducer 函数。
-- -------------------- ---- -------
-------- -------------------------- -
------ ------- ------- -- -
------ ------------- -
---- -------- ------ ------------------ --------
---- ------------ ------ --------------------- --------
-------- ------ -------------- --------
-
--
-
-------- ------------------ - --- ------- -
------ ------------- -
---- ----------- ------ -------------------------------
---- -------------- ------ ----------------- -- ------- --- -------------------
-------- ------ ------
-
-
----- ---------------------- - --------------------------------
----- ----------- - -----------------
------ -----------------------
---在上面的示例代码中，我们定义了一个 withCommonReducer 函数来增强 reducer。withCommonReducer 函数接受一个 reducer 函数作为参数，并将其包装成一个更具通用性和可重用性的 reducer 函数。
我们还定义了一个 todosReducer 函数，它是我们自己定义的 reducer。然而，我们使用 withCommonReducer 函数将其转换为一个更通用的 reducer。最后，我们使用 rootReducer 来引用 todosReducer。由于我们使用了 withCommonReducer 函数增强 reducer，我们可以确保我们的 todosReducer 具有和其他 reducer 相同的行为和逻辑。
结论
在 Redux 应用程序中，我们经常需要编写重复的代码来管理应用程序中的状态。在本文中，我们介绍了两种技巧来消除 Redux 中的重复代码。首先，我们使用了一个 createActionCreators 函数来简化 action creator 的创建。其次，我们定义了一个 withCommonReducer 函数来增强 reducer 函数的通用性和可重用性。这些技巧将使我们的代码更加简洁、高效和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676d550382fcee791c66eef6