Redux 是一种 JavaScript 应用程序状态管理工具，它已经成为开发复杂应用程序的标准方式。在本教程中，我们将学习如何在 Redux 中实现表单验证。
Redux
Redux 提供了一种管理复杂应用程序状态的方法，这些状态经常改变，难以在应用程序中单独管理。Redux 通过将应用程序的状态保存在单个对象中并提供可预测的状态更新流程来解决这个问题。
表单验证
表单验证是 Web 开发中必不可少的一部分，因为它可以确保输入数据的完整性和正确性。表单验证可以通过前端和后端两种方法实现，但在本教程中，我们将专注于前端实现。
实现示例
在本教程中，我们将创建一个简单的 Redux 表单验证应用程序，该应用程序将请求用户输入其名称和电子邮件地址，并确保电子邮件地址的格式正确。
我们首先需要设置 Redux 应用程序，实现 Redux 应用程序的基本结构。接下来，我们将定义 Redux store 和 Redux reducer，最后创建表单并将其连接到 Redux store。
设置 Redux 应用程序
要设置 Redux 应用程序，我们需要创建一个 index.html 文件，并链接到 Redux 应用程序的相关脚本和样式。我们还需要创建一个入口文件 index.js，该文件将包含应用程序的基本结构，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- -------------------
------ ----------- ---- -------------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在这个代码中，我们首先从 React 和 ReactDOM 导入所需的库。接下来，我们从 Redux 库中导入 createStore 和 Provider 函数，以及当前应用程序的根 reducer。我们通过创建 Redux store 来初始化应用程序：createStore(rootReducer)。我们使用 React 的 ReactDOM.render 函数将应用程序渲染到根页面元素上。
###定义 Redux store 和 reducer
Redux store 就是应用程序的状态存储容器。您可以将 Redux store 视为一个带有保存应用程序状态的 API 的对象。Redux store 本质上是一个简单的 JavaScript 对象。
为了在我们的应用程序中应用 Redux，我们需要定义一个 reducer 函数。Reducer 函数是对当前状态进行修改的纯函数。它接受当前应用程序的状态和一个指示要执行的操作的 action，然后返回一个新的应用程序状态。以下是 reducer 函数的示例：
-- -------------------- ---- -------
----- ------------ - -
----- ---
------ ---
----------------- ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------------
------ - --------- --------------- ------------ --
---- -----------------
----- - ------ ----- - - -------
----- ---------------- - - ------------------------- --
-- -------------------------------------------------- -
----------------------- - -------- ----- ---------
- ---- -
------ ------------------------
-
------ - --------- ---------------- --
--------
------ ------
-
-在这个代码中，我们定义了一个初始状态 initialState，它包括一个名称 name，一个电子邮件地址 email 和一个 validationErrors 字段，该字段将用于存储验证错误。
我们还定义了 rootReducer 函数，该函数将在 Redux store 中进行状态修改。它包括两个 action 类型：UPDATE_FIELD 和 VALIDATE_FIELD。UPDATE_FIELD 操作将更新 name 或 email 字段之一，而 VALIDATE_FIELD 操作将更新 validationErrors 字段。如果电子邮件地址格式不正确，则将验证错误添加到 validationErrors 对象中。
创建表单
现在，我们已经设置了 Redux 应用程序并定义了相关的 store 和 reducer 函数，接下来我们将创建表单。
在本示例中，我们将创建一个简单的表单，该表单包含一个用于输入用户名称的文本字段和一个用于输入用户电子邮件地址的文本字段。我们还将添加一个验证按钮，用户可以在单击此按钮后验证表单。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------ ------------- - ---- -------------------
-------- ----- ----- ------ ----------------- ------------ ------------- -- -
------ -
-----
-----
------ ----------------------------
------
-----------
---------
-----------
------------
----------------- -- ------------------- --------------------
--
------
-----
------ ------------------------------
------
-----------
----------
------------
-------------
----------------- -- -------------------- --------------------
--
------
----------------------- -- --------------------------------------
-----
------- ----------- -- -----------------------------------------
------
------
--
-
----- --------------- - ------- -- --
----- -----------
------ ------------
----------------- -----------------------
---
----- ------------------ - - ------------ ------------- --
------ ------- ------------------------ -------------------------在这个代码中，我们首先从 React 和 react-redux 库中导入所需的库。我们以函数组件的形式创建 App 组件，并将其通过 connect 函数连接到 Redux store。
组件 App 包括两个 input 标签和一个验证按钮。我们使用 React 的受控组件来确保表单字段的状态与 Redux store 中的状态同步。每当用户更改文本字段的值时，它就会触发一个 updateField 操作。当用户单击验证按钮时，将触发一个 validateField 操作，该操作将执行基本的电子邮件地址验证并将错误信息存储到 validationErrors 对象中。
完整代码
下方是完整的示例代码，其中包括所有的 Action 和 Reducer：
-- -------------------- ---- -------
-- ----------------
------ ----- ----------- - ------- ------ -- --
----- ---------------
------
------
---
------ ----- ------------- - ------- -- --
----- -----------------
------
---
-- -----------------
----- ------------ - -
----- ---
------ ---
----------------- ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------------
------ - --------- --------------- ------------ --
---- -----------------
----- - ------ ----- - - -------
----- ---------------- - - ------------------------- --
-- -------------------------------------------------- -
----------------------- - -------- ----- ---------
- ---- -
------ ------------------------
-
------ - --------- ---------------- --
--------
------ ------
-
-
------ ------- ------------
-- -----------------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------ ------------- - ---- -------------------
-------- ----- ----- ------ ----------------- ------------ ------------- -- -
------ -
-----
-----
------ ----------------------------
------
-----------
---------
-----------
------------
----------------- -- ------------------- --------------------
--
------
-----
------ ------------------------------
------
-----------
----------
------------
-------------
----------------- -- -------------------- --------------------
--
------
----------------------- -- --------------------------------------
-----
------- ----------- -- -----------------------------------------
------
------
--
-
----- --------------- - ------- -- --
----- -----------
------ ------------
----------------- -----------------------
---
----- ------------------ - - ------------ ------------- --
------ ------- ------------------------ -------------------------结论
在本教程中，我们介绍了 Redux 的基本概念，并演示了如何在 Redux 中实现表单验证。通过理解 Redux 的状态管理思想，您可以更好地管理复杂的应用程序状态，从而开发更加可靠和可预测的 Web 应用程序。希望这个教程对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ec832e884a3e30f29e202