当开发 Redux 的应用程序时，可能会发现过多的操作类型代码冗长、可读性差且难以维护。redux-create-action-types 就是为了解决这个问题而创建的 npm 包。通过它，我们可以快速创建出易于阅读和维护的操作类型名，同时还可以渲染出适合的 Reducer。
什么是 redux-create-action-types
redux-create-action-types 是一个 Redux 手动操作类型名的生成器。你以前可能会用过 const 这个 JS 关键字来定义操作类型常量，在这个常量名称前加一个唯一的名称空间来帮助区分不同模块的常量。每当你的应用程序有多个不同模块时，这种方法就会变得难以管理。redux-create-action-types 就是用来解决这个问题的。
这个包提供了一个生成器，它可以根据唯一的名称空间和基本操作列表，为应用程序创建操作类型常量。生成的名称空间可以让你弄清楚所有涉及某个类型的操作。同时，基本操作列表可以帮助你自动创建 Reducer 初始值，轻松处理状态更新。
安装和配置
首先，你需要使用以下命令安装 redux-create-action-types：
--- ------- ------ -------------------------
在项目中的使用：
------ ----------------- ---- ---------------------------- ----- ----------- - ------------------------------ - ------------- ------------- ---
上述代码将生成一个名称空间常量 NAMESPACE 和两个常量 ACTION_ONE 和 ACTION_TWO。输出的结果看起来就像这样：
-
---------- -
----------- -----------------------
----------- -----------------------
--
--你可以通过以下方式使用这些常量：
------ - ----------- - ---- ----------------- --- ---------- ----- -------------------------------- ---
示例代码
这里是一个示例来展示如何使用 redux-create-action-types 和 Reducer：
------ ----------------- ---- ----------------------------
------ ----- ----------- - ------------------------- -
------------
------------
---------
--------
---
------ ----- ------------ - -
----------- ------
----- -----
------ -----
--
------ ----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------------
------ -
---------
----------- -----
------ -----
--
---- ---------------------------
------ -
---------
----------- ------
----- ---------------
--
---- ------------------------
------ -
---------
----------- ------
------ ---------------
--
---- -----------------------
------ -
---------
----------- ------
----- -----
------ -----
--
--------
------ ------
-
--总结
redux-create-action-types 可以让你的应用程序看起来更干净、简单、可读和可维护。你可以更快地开发，更容易理解代码。当你创建操作类型时，不使用字符串的方法也没有问题，但是最好还是使用一个包含名称空间和操作名称的对象来区分 actions。不使用 redux-create-action-types，你可能需要为每个操作布尔气类型，并且将它们统一放在一起。但是，使用 redux-create-action-types 会更加容易阅读和管理你的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067007e361a36e0bce8a98