概述
redux 是一个非常流行的状态管理库，它能够很好地管理前端应用的状态。但是，redux 的使用方法比较繁琐，需要写很多的代码。为了简化 redux 的使用，我们可以使用一个叫做 redux-scaffold 的 npm 包。redux-scaffold 能够根据我们提供的模板自动生成 redux 相关的文件和代码，省去了很多繁琐的工作。本文将介绍如何使用 redux-scaffold 这个 npm 包。
安装
redux-scaffold 是一个 npm 包，使用它之前需要先安装它。可以使用下面的命令安装：
npm install --save-dev redux-scaffold
使用方法
创建一个模板
首先，我们需要先创建一个模板，这个模板包含了我们需要使用的 redux 的状态、reducers、actions 等等。在使用 redux-scaffold 之前，需要先定义这个模板。
创建一个模板的方法很简单，只需要按照约定在工程目录下创建一个名字为 scaffold 的目录即可。在这个目录下通常会包含一个或者多个文件或目录，这些文件或目录描述了 redux-staffold 应该如何生成代码。
一个典型的 scaffold 文件架构如下：
-- -------------------- ---- ------- --- --------- - -- --------- - - -- ------- - -- -------- - - -- ------- - -- ---------- - - -- ------- - -- ---------- - - -- ------- - -- ------ - - -- ------- - -- --------
其中，reducers 目录包含了 reducer 文件，actions 目录包含了 action 文件，constants 目录包含了常量定义，selectors 目录包含了 reselect 文件，sagas 目录包含了 sagas 文件，index.js 则是主入口文件。
需要注意的是，redux-scaffold 会根据约定自动读取 scaffold 目录下的各个文件内容，并生成相应的 redux 相关代码。
生成代码
使用 scaffold 目录生成相应的代码非常简单，只需要在命令行中输入下面的命令：
scaffold generate
这个命令会自动根据 scaffold 目录中的内容生成相应的 redux 相关的代码。生成的代码在 src/redux 目录下。
实例
下面是一个实例。
创建模板文件
在项目的根目录中创建 scaffold 目录，然后在 scaffold 目录下创建四个子目录： reducers、actions、constants 和 selectors。在这些子目录中，分别创建一个名为 main.js 的文件，用于存储相应的 redux 相关代码。
-- -------------------- ---- ------- --- --------- - -- --------- - - -- ------- - -- -------- - - -- ------- - -- ---------- - - -- ------- - -- ---------- - - -- -------
将下面的代码添加到 reducers/main.js 中：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ------------- - ---- ---------------- ----- ------------ - --- ----- ---------- - -- -- --------------- -- ----- --- ------- ------- ---- -- -------------- ----- ------------ - ----------------- ----- ------------- --- ------ ------- -------------
将下面的代码添加到 actions/main.js 中：
import { createAction } from 'redux-actions';
export const testAction = createAction(
'Test Action',
() => true,
);在 constants/main.js 中添加下面的代码：
export const TEST_ACTION = 'Test Action';
在 selectors/main.js 中添加下面的代码：
import { createSelector } from 'reselect';
export const testSelector = createSelector(
(state) => state.main,
({ testState }) => testState,
);使用 redux-scaffold 生成代码
在命令行中输入下面的命令：
scaffold generate
等待生成结束后，打开 src/redux/main.js 文件，可以看到自动生成的 redux 相关代码：
-- -------------------- ---- -------
------ - ---------------- ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - --- - ---- ---------------------
------ ------------ ---- ------------------
------ - ---------- - ---- -----------------
------ - ----------- - ---- -------------------
------ - ------------ - ---- -------------------
------ -
-----------
------------
-------------
--
--------- ---------- -
----- --------
-
----- -------------- - -----------------------
----- ---------- - -----------------
----- ----- - ------------
-----------------
----------------
---
-------------------------------
--
-----------------------------
------ ------- ------上面的代码中包含了自动生成的 actions、reducers、constants 和 selectors 相关的代码。
总结
本文介绍了如何使用 redux-scaffold，这个 npm 包能够帮助我们用最小的代价生成 redux 相关的代码。使用 redux-scaffold 能够大大提高开发效率，推荐各位前端工程师在开发时使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ac3