在前端开发中，状态管理是一个相当重要的概念。Redux 是一个流行的状态管理库，但是，同样重要的是状态的命名。而使用带着命名规范的命名，可以让状态管理更加清晰更有条理。在这里，我们就来介绍一个可以帮助开发人员更好管理状态命名的 npm 包：redux-lexicon。
安装
你可以使用 npm 命令行来安装 redux-lexicon 并将它添加到你的项目依赖中：
npm install redux-lexicon --save
使用
在 Redux 中，我们定义 action 和 reducer 是状态管理的关键。Redux 奉行可预测性和纯函数的思想。因此，我们需要使用特定的命名规范来表示我们的 action 类型和 reducer 名称。而 redux-lexicon 就是一个帮助我们更好地规范这些命名的库。
首先创建一个 Lexicon 对象，然后添加一些键值对表示你的 action 或 reducer 的名称：
import { Lexicon } from 'redux-lexicon';
const lexicon = new Lexicon()
.add('FETCH_USERS')
.add('ADD_USER')
.add('REMOVE_USER', 'deleteUser');
export default lexicon;在这个例子中，我们定义了三个 action 常量：FETCH_USERS、ADD_USER 和 REMOVE_USER。由于 REMOVE_USER 是一个删除操作，我们使用了别名 deleteUser 来给 reduce 函数使用。
然后，我们可以在 Redux 的 action creator 函数中使用这些常量：
-- -------------------- ---- -------
------ - ------------ --------- ----------- - ---- --------------
------ ------- ---- -------------------
------ -------- ------------ -
------ -
----- ------------------------
--
-
------ -------- ------------- -
------ -
----- ----------------------
-------- ----
--
-
------ -------- -------------- -
------ -
----- -------------------------
-------- --
--
-在我们的 action creator 函数中，我们使用了 lexicon.get() 方法来动态地获取 Lexicon 中指定键所对应的值。因此，在其他地方我们更改了这个键的值，action creator 函数中也会跟着变化。
在 reducer 中，我们可以使用 Lexicon 作为 reducer 的名称，从而改善代码可读性：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ ------- ---- -------------------
------ - ------------ --------- ----------- - ---- --------------
-------- ----------- - --- ------- -
------ ------------- -
---- -------------------------
-- --------- ------
------ ------
---- ----------------------
-- ------- ------
------ ---------- ----------------
---- -------------------------
-- ------- ------
------ ----------------- -- ------- --- ----------------
--------
------ ------
-
-
------ ------- -----------------
-----
---在这个例子中，我们使用 lexicon.get() 来获取了 Lexicon 中的一些键，这使得代码看起来更加清新和有组织性。
总结
使用 redux-lexicon 可以大大改善项目中的 Redux 的代码可读性和维护性。使用它来规范你 的 action 和 reducer 命名将会使你的项目变得更加整洁，同时也会大大提高你的代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ca81e8991b448e0113