当使用 Redux 管理状态时，我们经常需要定义一系列 actions 类型和对应的 action creators。但是在实际开发中，我们可能会发现有很多 actions 的定义只是同样的一些字段不同的变体。这会导致代码冗余和维护成本的增加。本文将介绍一种解决这个问题的方法。
问题分析
假设我们正在开发一个 Todo 应用，并需要定义三种 actions：添加任务、删除任务和完成任务。这些 actions 分别对应的类型是 ADD_TODO、DELETE_TODO 和 TOGGLE_TODO。
我们可以编写如下的 action creators：
-------- ------- ------ -
------ -
----- -----------
-------- -
----
-
--
-
-------- ---------- ---- -
------ -
----- --------------
-------- -
--
-
--
-
-------- ---------- ---- -
------ -
----- --------------
-------- -
--
-
--
-这些 action creators 的实现都很相似，只有具体的 type 和 payload 不同。这样做会导致重复的代码和难以维护。
解决方案
我们可以将创建 action creators 的逻辑提取出来，编写一个函数来生成它们。比如：
-------- ----------------- ------ ------------ -
------ -------- --------- -
--- ------ - - ---- --
-------------------------- ------ -- -
--------------- - ------------
---
------ -------
--
-
----- ------- - ----------------------------- --------
----- ---------- - -------------------------------- ------
----- ---------- - -------------------------------- ------这里的 makeActionCreator 函数是一个高阶函数，它接受一个 type 和一些参数名提供给 action creator，返回一个新的函数来生成 action。
我们可以看到，这种方式使得我们不用为每一个 action 再写一个 action creator，简化了代码。
示例代码
下面是一个完整的示例代码，展示了如何将上面的解决方案应用于一个简单的 Todo 应用：
-- --------
------ ----- -------- - -----------
------ ----- ----------- - --------------
------ ----- ----------- - --------------
-- ----------
------ - ----------------- - ---- ----------
------ - --------- ------------ ----------- - ---- ----------
------ ----- ------- - --------------------------- --------
------ ----- ---------- - ------------------------------ ------
------ ----- ---------- - ------------------------------ ------
-- --------------
------ - --------- ------------ ----------- - ---- ----------
------ ------- -------- ----------- ------ - --- ------- -
------ ------------- -
---- ---------
------ -
---------
-
----- --------------------
---------- -----
-
--
---- ------------
------ ------------------- -- ------- --- -------------------
---- ------------
------ ---------------- -- -
-- -------- --- ------------------ -
------ -
--------
---------- ---------------
--
-
------ -----
---
--------
------ ------
-
-
-- --------
------ -------- ----------------- ------ ------------ -
------ -------- --------- -
--- ------ - - ---- --
-------------------------- ------ -- -
--------------- - ------------
---
------ -------
--
-
-- --------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - -------- ----------- ---------- - ---- ------------
----- ----- ------- --------- -
------ -- -
----- - ------ -------- ----------- ---------- - - -----------
------ -
-----
----
----------------- -- -
--- --------------
----- -------- --------------- -------------- - -------------- - ------ ---------------------
------- ----------- -- ------------------------------------
------- ----------- -- ------------------------------------
-----
---
-----
------ ----------- --------- -- - ---------- - --- -- --
------- ----------- -- ---------------------------------------
------
--
-
-
----- --------------- - ------- -- --
------ -----------
---
----- ------------------ - -
--------
-----------
----------
--
------ ------- ------------------------ ---------------------------结论
通过将创建 action creators 的逻辑提取出来，我们可以避免重复代码，减少维护成本。这个技巧可以用于任何 Redux 应用中，特别是那些需要管理多个状态的复杂应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f23665f55128102630c15