如果你作为前端开发者从来没有使用过 JavaScript 的包管理器 npm，那么可以先移步了解一下，我们这里就不再赘述了。如果你熟练掌握 npm，那么 generator-redux-recompose 就是一个值得尝试的 npm 包，它可以帮助我们快速创建高可维护性的 React Redux 应用。
1. 什么是 generator-redux-recompose
generator-redux-recompose 是一个基于 Yeoman 和 Redux 的代码生成器，准确来讲，它是一个 Yeoman 生成器，可以自动生成 Redux Action、Reducer、Container 和 Component。在使用 generator-redux-recompose 之前，我们需要安装 Yeoman 和 generator-redux-recompose：
npm install -g yo generator-redux-recompose
2. 如何使用 generator-redux-recompose
使用 generator-redux-recompose 可以分为以下几个步骤：
2.1 初始化项目
首先我们需要创建一个新的 React 项目，可以直接使用 create-react-app 来创建：
create-react-app my-redux-app cd my-redux-app
2.2 安装 generator-redux-recompose
在项目根目录下，安装 generator-redux-recompose：
npm install --save-dev generator-redux-recompose
2.3 运行 generator-redux-recompose
在项目根目录下运行 Yeoman：
yo redux-recompose
接着会有一系列的问题需要回答：
- 组件名字：输入你想要创建的组件名称
- 是否需要连接到 Redux：是或不是
- 是否需要创建子组件：是或不是（用于创建页面中的嵌套组件）
回答完问题后，generator-redux-recompose 就会自动创建 component、container、action 和 reducer。
2.4 其他可用的 Yeoman 命令
generator-redux-recompose 还提供了其他一些 Yeoman 命令：
- yo redux-recompose:component – 创建组件
- yo redux-recompose:container – 创建容器
- yo redux-recompose:action – 创建 action
- yo redux-recompose:reducer – 创建 reducer
3. 生成的代码介绍
使用 generator-redux-recompose 生成的代码为目录和文件结构，例如：
-- -------------------- ---- -------
----
-----------
--------------
-----------
--------------
--------
-----------
---------
------------3.1 Component
在 components 目录下，会自动生成一个 MyComponent.js 文件，示例代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- ---- ------------
----- ----------- - ------- -- -
------ -
-----
-----------
------
-
-
--------------------- - -
-- ----- --- ---- -----
-
------ ------- -----------3.2 Container
在 containers 目录下，会自动生成一个 MyContainer.js 文件，示例代码如下：
-- -------------------- ---- -------
------ - ------- - ---- -------------
------ ----------- ---- ---------------------------
----- --------------- - ------- -- -
------ -
-- ----- --- ----- -----
-
-
----- ------------------ - ---------- -- -
------ -
-- ----- --- -------- -----
-
-
------ ------- ------------------------ --------------------------------3.3 Action
在 actions 目录下，会自动生成一个 myAction.js 文件，示例代码如下：
export const MY_ACTION = 'MY_ACTION'
export const myAction = () => {
return {
type: MY_ACTION
}
}
3.4 Reducer
在 reducers 目录下，会自动生成一个 myReducer.js 文件，示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------
----- ------------ - -
-
----- --------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ -----
--------
------ -----
-
-
------ ------- ---------4. 总结
generator-redux-recompose 可以帮助我们快速创建高可维护性的 React Redux 应用，节省了我们手动创建文件的时间，同时也可以保证代码的组织结构和标准化。使用 generator-redux-recompose 可以让我们更专注于业务逻辑的实现，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab281e8991b448d8490