前言
在前端开发中，使用 Redux 是非常常见的做法，特别是在大型项目中，Redux 可以帮助我们更好的管理应用的状态。然而一个问题是，由于 Redux 的设计思路比较自由，开发人员并没有一个规范来约束如何编写 action。
在这种情况下，redux-action-validator 这个 npm 包可以帮助我们来规范和验证我们的 Redux action。
准备工作
在使用 redux-action-validator 之前，需要先确定 Redux 已经安装和配置完成。如果还没有完成，可以参考官方文档 Redux 中文文档 来进行配置。
然后，在项目根目录中执行以下命令来安装 redux-action-validator：
npm install redux-action-validator --save-dev
开始使用
配置规则
首先，在你的项目中创建一个文件 action-validation.js，并在其中定义 action 的验证规则。比如：
-- -------------------- ---- -------
------ ----------------- ---- -------------------------
------ ------------- ---- ---------------
----- --------- - -----------------
-------------------------- -
------ ----- ----- --------- --------- ------
------ ------- ----- --------- --------- ------
------ -------- ----- ---------
------ -------- ----- ---------
------ ---------- ----- ----------
--
---在上面的代码中，我们使用了 createValidator 函数来创建一个验证器。这个验证器接受一个对象作为参数，其中每个属性表示一个 action 的类型，值则是这个 action 的参数的验证规则。具体规则如下：
name，参数名type，类型required，是否是必须参数
type 参数可以是以下类型及其组合：
stringnumberbooleanarrayemailphoneurl- 自定义类型
比如：
{
name: 'amount',
type: ['number', '>=0', '<=1000'],
required: true
}这个规则表示，amount 是必须的，且必须是一个 0 和 1000 之间（包括边界）的数字。
使用中间件
在 Redux 中，我们可以通过中间件来对 action 进行拦截。我们可以编写一个中间件，在其中使用 redux-action-validator 进行验证，如果验证失败，则会抛出异常，从而中断 action 的流程。示例代码如下：
-- -------------------- ---- -------
------ --------------- ---------------- ---- -------------------------
------ ------- ----- -- ---- -- ------ -- -
-- ----------------------- -
------ -------------
- ---- -
---------------------------------
-
--在上面的代码中，我们定义了一个中间件，它会检查 action 是否符合我们在 action-validation.js 文件中定义的验证规则。如果中断了 action 流程，那么会在控制台输出验证失败的原因。
当然，你也可以根据实际需求进行定制化修改。
示例代码
假设我们有一个 updateUser 的 action，其中需要包含 id、name、email、phone、address 这几个参数。下面是一个使用 redux-action-validator 的示例代码：
-- -------------------- ---- -------
-- -- ----------- --
------ ----- ----------- - -
------------ --------------
--
-- -- -------------- - -------------
------ ----- -------------- - ---- ----- ------ ------ -------- -- -
------ -
----- ------------------------
-------- -
---
-----
------
------
--------
--
--
--
-- --------------------
------ ----------------- ---- -------------------------
------ ------------- ---- ---------------
----- --------- - -----------------
-------------------------- -
------ ----- ----- --------- --------- ------
------ ------- ----- --------- --------- ------
------ -------- ----- ---------
------ -------- ----- ---------
------ ---------- ----- ----------
--
---
------ ------- ----------
-- - ----- ------
------ ----------------- ------------ ---- --------
------ ------------------------- ---- ---------------
----- ----- - ------------
--------
------------------------------------------
--上面的代码中，我们定义了一个 updateUserInfo 的 actionCreator，它接受 id、name、email、phone、address 五个参数。然后在 action-validation.js 中定义了 actionTypes.UPDATE_USER 的验证规则，之后在 store 中使用 createValidatorMiddleware 作为中间件来进行验证。
结语
redux-action-validator 可以帮助我们规范我们的 Redux action，确保参数的正确性和必要性。在较大的项目中，这个包的使用可以提高 action 的质量，降低错误率，从而提高整个项目的稳定性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c45