在前端开发中，使用 Redux 管理状态是很常见的。而在使用 Redux 的过程中，我们需要定义很多 action，这些 action 的名字往往会变得非常复杂，给代码的可读性和维护性都带来很大的困扰。为解决这个问题，我们可以使用 npm 包 redux-action-names，本文将介绍如何使用该包来简化 Redux Action 名称。
安装
在项目中运行下面的命令来安装 redux-action-names:
--- ------- ------------------
用法
redux-action-names 提供了一个 createNames 函数，可以根据传入的前缀生成一组 action 名称。
------ - ----------- - ---- --------------------- ----- ------ - ------------ ----- ----- - ------------------- - ----------- -------------- -------------- --- ---------------------------- -- ------------------ ------------------------------- -- --------------------- ------------------------------- -- ---------------------
createNames 函数接收两个参数，第一个参数是前缀，第二个参数是一个字符串数组，包含了需要生成的 action 名称。
生成的 action 名称格式为 ${prefix}/${actionName}，这样就可以避免命名冲突，同时便于在开发工具中查看 action 名称。
我们可以将生成的 action 名称用作 Redux 中的 action 常量，例如：
------ ----- ------------ - ------------------- - ----------- -------------- -------------------- ---
在 reducer 中可以这样使用：
------ - ------------ - ---- --------------
------ ------- -------- ----------- - --- ------- -
------ ------------- -
---- ----------------------
------ ---------- - ----- --------------- ---------- ----- ---
---- -------------------------
------ ------------------- ------ -- ----- --- ----------------
---- -------------------------------
------ ---------------- ------ -- -
-- ------ --- --------------- -
------ - -------- ---------- ---- --
-
------ -----
---
--------
------ ------
-
-指导意义
使用 redux-action-names 可以有效提高代码的可读性和维护性，避免同一项目中不同部分的命名冲突。同时，在开发工具中能够准确地显示 action 名称，方便开发者调试和追踪代码。
值得注意的是，虽然 redux-action-names 可以省略手动定义的 action 常量，但是过度使用可能会导致代码过于复杂，因此在实际使用中需要合理掌握。
示例代码
完整的示例代码如下：
------ - ----------- - ---- ---------------------
----- ------------ - ------------------- -
-----------
--------------
--------------------
---
-------- ------------- -
------ -
----- ----------------------
-------- -----
--
-
-------- ----------------- -
------ -
----- -------------------------
-------- ------
--
-
-------- ---------------------- -
------ -
----- -------------------------------
-------- ------
--
-
------ - -------- ----------- --------------- -------- - ------------ - ---- --------------
------ ------- -------- ----------- - --- ------- -
------ ------------- -
---- ----------------------
------ ---------- - ----- --------------- ---------- ----- ---
---- -------------------------
------ ------------------- ------ -- ----- --- ----------------
---- -------------------------------
------ ---------------- ------ -- -
-- ------ --- --------------- -
------ - -------- ---------- ---- --
-
------ -----
---
--------
------ ------
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067009e361a36e0bce8c08