前言
redux-helpers-cgen 是一个由 JS-Index 与 NGX-studio 共同开发的 npm 包，它能够帮助开发者快速生成 Redux 相关的文件，从而提高开发效率、减少重复代码。
安装
可以使用 npm 来安装这个包，命令如下：
--- ------- ------------------ ----------
使用方法
redux-helpers-cgen 的使用非常简单，只需要执行一个命令即可生成 Redux 相关的文件。在项目根目录下打开终端，输入以下命令：
------------------ ------------- ----- ------ ------
其中，模块名是必填项，表示生成的 Redux 相关文件所属的模块名称。文件路径可选，表示生成的文件存放的地址，如果不填则默认存放在 Redux 的 store 目录下。
执行命令后，即可生成 Redux 相关的文件，包括 action types、actions、reducers 和 selectors 等。同时，该命令也会把文件路径添加到 Redux 的 root reducer 中。
进一步说明
下面将详细说明 redux-helpers-cgen 的使用方法。
生成 action types
执行如下命令，即可生成包含 action types 的 js 文件。
------------------ ------------- ----- ------ ------ ------------------ ----
生成的文件名为 actions.js，包含了通过 defineAction 函数生成的 action types。
生成 action creators
执行如下命令，即可生成包含 action creators 的 js 文件。
------------------ ------------- ----- ------ ------ ------------- ----
生成的文件名为 [模块名]Actions.js，包含了通过 createAction 函数和 createActions 函数生成的 action creators。
生成 reducers
执行如下命令，即可生成包含 reducers 的 js 文件。
------------------ ------------- ----- ------ ------ ------------- ----
生成的文件名为 [模块名]Reducer.js，包含了通过 handleActions 函数生成的 reducers。
生成 selectors
执行如下命令，即可生成包含 selectors 的 js 文件。
------------------ ------------- ----- ------ ------ --------------- ----
生成的文件名为 [模块名]Selector.js，包含了通过 Reselect 库生成的 selectors。
示例代码
下面是一个使用 redux-helpers-cgen 生成 Redux 相关文件的示例。
假设我们有一个模块叫做 cart，用来管理购物车，我们可以通过以下命令生成对应的 Redux 相关文件：
------------------ ------------- ----
执行后，会生成以下文件和文件夹：
- actions.js
- cartActions.js
- cartReducer.js
- cartSelectors.js
- index.js（存储了 root reducer）
其中，actions.js 文件内容如下：
------ - ------------ - ---- ----------------------- ------ ----- ------------- - ----------------------------- --- -------------- ------ ----- ---------------- - -------------------------------- --- --------------
而 cartActions.js 文件内容如下：
------ - ------------ - ---- ---------------- ------ - -------------- ---------------- - ---- ------------ ------ ----- ----------- - ---------------------------- ------ ----- -------------- - -------------------------------
cartReducer.js 文件内容如下：
------ - --------------- ------------- - ---- ---------------------
------ - -------------- ---------------- - ---- ------------
----- ------------ - -
---------- ---
--
----- -------- - ----------------
---------------- ------- - -------- -------- -- -- -
-- ---------------------------- -
------------------------- - --
-
------------------------- -- --
--
------------------- ------- - -------- -------- -- -- -
-- --------------------------- -
------------------------- -- --
-- -------------------------- --- -- -
------ --------------------------
-
-
--
---
----- ------- - ----------------------- --------------
------ ------- --------最后，cartSelectors.js 文件内容如下：
------ - -------------- - ---- ----------- ------ - --- - ---- --------- ------ - --------- - ---- ----------------------- ----- ---------------- - ------- ---------- -- ---------- ---------- ------ ----- ----------------- - --------------- ----------------- ---------- -- ------------------- --
至此，我们成功使用 redux-helpers-cgen 生成了 Redux 相关的文件，让开发变得更加高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57917