前言：Redux 是当前前端开发中使用的最流行的状态管理工具之一，但在使用的过程中对于表单验证等领域却显得力不足。但在这里，我们可以使用一个名为 redux-validation 的 npm 包，它可以使我们在 redux 中轻松地实现表单验证。
安装
在终端中运行以下命令进行安装：
--- ------- ---------------- ------
安装完成后，我们在需要使用的地方引入即可：
------ - --------------- - ---- -------------------
创建表单验证器
我们可以根据需要编写不同的验证器，验证器是一个简单的函数，根据传递数据的类型和格式来判断是否合法。
假设我们要验证用户登录表单的用户名和密码，那么我们可以这样编写验证函数：
----- -------------- - ---------------------- -- -
----- - --------- -------- - - -----
----- ------ - ---
-- ---------- -- --------------- --- --- -
--------------- - ---------
-
-- ---------- -- --------------- --- --- -
--------------- - --------
-
------ -------
---上述代码中，我们通过传入表单数据来验证其是否合法，如果不合法则返回一个包含错误信息的对象。
在 redux 中使用表单验证器
在 redux 中使用 redux-validation 很简单，我们需要使用 redux-validation 中提供的 validateMiddleware，它可以拦截 redux action 中的包含 validate 属性的 action，并对其进行数据验证。
------ - ------------ --------------- - ---- -------- ------ - ------------------ - ---- ------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ----------------------------------- --
此时我们需要在需要提交表单的组件中 dispatch 包含 validate 属性的 action：
------ - -------------- - ---- ---------------
------ - ----- - ---- ------------
-- ---
------------ - --- -- -
-------------------
----- - --------- -------- - - -----------
----- ------ - ---------------- --------- -------- ---
-- --------------------------- --- -- -
--------------------------- --------- -------- ----
- ---- -
-- ------
-
--
-- ---
-------- -
------ -
----- -----------------------------
--- ------ ----- ------ ---
------- -------------------------
-------
--
-在上述代码中，我们首先利用 loginValidator 验证用户输入的信息是否有效，如果有错误，则将错误信息显示出来，否则使用 login action 将用户信息提交给 redux store。
总结
使用 redux-validation，我们可以非常方便地在 redux 中实现表单验证，代码清晰简洁，可读性和可维护性都非常高。当然，使用 redux-validation 还需要合理地设计验证器和错误信息的显示，这都需要开发者根据实际需求来确定。
代码示例：https://github.com/Qinjiaxuan/redux-validation-example
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067011e361a36e0bce8d88