Redux 是一个非常流行的 JavaScript 应用程序状态管理工具。在任何 React 和 Redux 应用程序中，表单是一个关键组件。使用 Redux 管理表单状态可能会变得很棘手。这就是为什么 Redux Simple Form 这个 npm 包很受欢迎的原因。这个包可以极大地简化表单的管理和状态更新。
安装
首先，在终端中运行以下命令安装 redux-simple-form 包：
npm install --save redux-simple-form
接下来，确保在应用程序中添加了 Redux 依赖项。如果未安装 Redux 依赖项，请运行以下命令：
npm install --save redux react-redux
使用
在使用 redux-simple-form 包之前，需要有一个 Redux store 和一些实例化的 Redux action。让我们首先创建一个 Redux store 和一些 action。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------------- - ---- --------
------ - ------- -- ----------- - ---- --------------------
----- ------------ - -
----- ---
------ ---
-------- ---
--
----- ------------ - ---------------
------ ----- ----------------- - ------- ------ -- -
------ -
----- -------------
-------- -
------
------
--
--
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------
------ -
---------
----------------------- ---------------------
--
--------
------ ------
-
--
----- ----------- - -----------------
----- ------------
---
----- ----- - -------------------------我们创建了一个名为 formReducer 的 reducer，并将其添加到了 rootReducer 中。我们的应用程序将具有如下应用程序状态：
{
form: {
name: "",
email: "",
message: "",
},
}同时，我们的 reducer 也限定了处理从 action 对象中的 field 和 value 属性传递的值的方式。现在我们已经拥有了一个 Redux store 和 action，让我们看看如何使用 redux-simple-form。
让我们创建一个名为 ContactForm 的 React 组件，并根据需要将其导出。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------------- - ---- ------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------------------- - ----------------------------------
-
------------------------ -
----- - ------ - - ------
----- - ----- ----- - - -------
-- -------- ----------------- ------ ---- ---- ----- --- -----
---------------------------- -------
-
-------- -
----- - ----- ------ ------- - - -----------
------ -
------
-------
-----
------
-----------
-----------
------------
---------------------------------
--
--------
--- --
-------
------
------
-----------
------------
-------------
---------------------------------
--
--------
--- --
-------
--------
---------
--------------
---------------
---------------------------------
--
--------
--- --
------- -----------------------------
-------
--
-
-
----- --------------- - ------- -- -
----- - ---- - - ------
------ -
----- ----------
------ -----------
-------- -------------
--
--
----- ------------------ - ---------- -- -
------ -
------------ ------- ------ -- --------------------------------- --------
--
--
------ ------- ------------------------ ---------------------------------在这里，我们根据需要从 Redux store 中获取 field 值，并将其传递给表单传入的 handleInputChange 处理程序。这个处理程序会向 Redux stor dispatch 一个 changeInputAction action，以更新特定 field 的值。
现在，我们可以使用 ContactForm 组件来呈现一个包含三个输入字段的表单。这个表单将更新 Redux store 中的值，并在每次触发输入值的变化时发送一个 action。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - --------------- - ---- --------
------ - ------- - ---- --------------
------ - ------- -- ----------- - ---- --------------------
------ - ----------------- - ---- ------------
-- ------ ------- ----- --- ----- -----
----- ------------ - -
----- ---
------ ---
-------- ---
--
-- ------ -- ------ -- ------ ---- ----- -----
----- ------------ - ---------------
-- ------ - ----- ------- -- ------ ----- -----
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------
------ -
---------
----------------------- ---------------------
--
--------
------ ------
-
--
-- ------- -------- --- ------ -----
----- ----------- - -----------------
----- ------------
---
----- ----- - -------------------------
-- ------ - ----------- --------- -- ------ ----
----- ----------- ------- --------------- -
------------------ -
-------------
-- ---- ----- ------ ------- -- -----
---------------------- - ----------------------------------
-
-- ------- -- -------- -- ----- ------ ------
------------------------ -
----- - ------ - - ------
----- - ----- ----- - - -------
---------------------------- -------
-
-- ------ ----
-------- -
----- - ----- ------ ------- - - -----------
------ -
------
-------
-----
------
-----------
-----------
------------
---------------------------------
--
--------
--- --
-------
------
------
-----------
------------
-------------
---------------------------------
--
--------
--- --
-------
--------
---------
--------------
---------------
---------------------------------
--
--------
--- --
------- -----------------------------
-------
--
-
-
-- --- ----- ----- ----- -- ----------- -----
----- --------------- - ------- -- -
----- - ---- - - ------
------ -
----- ----------
------ -----------
-------- -------------
--
--
-- --- ------------ ------- -- ----------- -----
----- ------------------ - ---------- -- -
------ -
------------ ------- ------ -- --------------------------------- --------
--
--
-- ------- ----------- --------- -- ----- -----
----- -------------------- - --------
----------------
------------------
---------------
-- ------ ----------- --------- -- --------
----------------
--------- --------------
--------------------- --
------------
-------------------------------
--总结
在本教程中，我们学习了如何使用 redux-simple-form 包来管理 React 表单状态。我们创建了一个可用于设置 Redux store 初始状态、初始化 store 和创建新的 Redux action 的代码段。最后，我们将创建的 ContactForm 组件与 Redux store 进行了连接，以控制表单的状态。Redux Simple Form 的使用有助于编写清晰、可维护且可扩展的代码，并帮助您管理复杂表单的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b58