React 作为现今前端框架的主流之一，不可避免地需要处理表单数据。而在处理表单数据的过程中，我们常常遇到的问题是如何保持表单状态的同步更新，并将表单数据提交到后端服务器。
Redux 作为一种数据流方案，为我们提供了一种更好的方法来处理数据的协调与通信。这篇文章将会讲解在 React+Redux 框架下如何处理表单数据。
1. 创建 React 表单
首先，我们需要创建一个基本的 React 表单组件，可以使用 useState 钩子函数来管理表单内部的状态，这样我们就可以实时获取和更新表单数据。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ---- - -- -- -
----- ----------- ------------- - ----------
----- ---
------ ---
------ ---
-------- --
---
----- ----------------- - - -- -
--------------
-------------
---------------- --------------
---
--
----- ------------ - - -- -
-------------------
-- -----------
--
------ -
----- ------------------------
------
-----------
-----------
----------------------
----------------------------
--
------
------------
------------
-----------------------
----------------------------
--
------
----------
------------
-----------------------
----------------------------
--
---------
--------------
-------------------------
----------------------------
--
------- -------------------------
-------
--
--
------ ------- -----这个表单组件包含了四个文本输入框和一个文本域，我们在这个组件中使用 useState 钩子函数来管理组件内部的状态。在处理输入变化时，我们使用 handleInputChange 函数来更新表单状态。
注意，我们使用了对象的展开运算符 ... 来确保在更新表单状态时不会丢失之前的 state 数据。
2. 将表单状态数据存储到 Redux Store 中
在这里，我们需要创建一个 Redux Store 来存储表单数据的状态。首先，我们需要定义 action 和 reducer。
在 Redux 中，action 是将数据从应用发送到 store 的有效载荷，而 reducer 则是一个纯函数，用于指定应用程序状态如何响应 action 并产生新的 state。
我们可以使用下面的代码来创建 action 和 reducer：
-- -------------------- ---- -------
-----------
------ ----- -------------- - ------- ------ -- --
----- -------------------
------
-----
---
------------
----- ------------ - -
----- ---
------ ---
------ ---
-------- --
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
--------------- ------------
--
--------
------ ------
-
--
------ ------- ------------这里，我们创建了一个名为 updateFormData 的 action，它由两个参数 field 和 value 组成。updateFormData action 的目的是将表单对应的 field 数据更新为 value。
同时，在 reducer 中，我们创建了一个名为 formReducer 的纯函数，它将收集从 updateFormData action 发送过来的数据并将其保存在全局 store 中。
注意，我们还需要在全局 Redux Store 中创建一个名为 form 的状态对象，并将 formReducer 注册到这个 Store 中：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------- ---- ------------------------- ----- ----------- - ----------------- ----- ----------- --- ----- ----- - ------------------------- ------ ------- ------
在这里，我们将 formReducer 注册到了全局 rootReducer 中，在 store 中创建并导出 rootReducer。
3. 与 Redux Store 同步表单状态
接下来，我们需要将表单的状态与 Redux Store 中的状态保持同步。我们需要使用 useSelector 钩子函数从 Redux Store 中获取表单状态，并使用 useDispatch 钩子函数来将表单状态更新到 Redux Store 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------------- - ---- -------------
----- ---- - -- -- -
----- --------- - ----------------- -- ------------
----- -------- - --------------
----- ----------------- - - -- -
----- - ----- ----- - - ---------
----------------------------- --------
--
----- ------------ - - -- -
-------------------
-- --------
--
------ -
----- ------------------------
------
-----------
-----------
----------------------
----------------------------
--
------
------------
------------
-----------------------
----------------------------
--
------
----------
------------
-----------------------
----------------------------
--
---------
--------------
-------------------------
----------------------------
--
------- -------------------------
-------
--
--
------ ------- -----通过使用 useSelector 钩子函数，我们可以从全局状态中获取了 form 状态，并使用 useDispatch 钩子函数更新 Redux Store 中的表单状态。
4. 数据提交到后端服务器
最后，我们需要将表单数据提交到后端服务器。我们可以通过 axios 库来进行数据提交操作。可以在 handleSubmit 函数中加入 axios.post() 方法来将表单数据提交到后端服务器。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------------- - ---- -------------
------ ----- ---- --------
----- ---- - -- -- -
----- --------- - ----------------- -- ------------
----- -------- - --------------
----- ----------------- - - -- -
----- - ----- ----- - - ---------
----------------------------- --------
--
----- ------------ - - -- -
-------------------
------------------------------ ------------------------ -- -
-- --------
---
--
------ -
----- ------------------------
------
-----------
-----------
----------------------
----------------------------
--
------
------------
------------
-----------------------
----------------------------
--
------
----------
------------
-----------------------
----------------------------
--
---------
--------------
-------------------------
----------------------------
--
------- -------------------------
-------
--
--
------ ------- -----在这里，我们使用了 axios.post() 方法来提交表单数据，并将表单数据作为第二个参数传递给 axios.post() 方法。在返回的响应中，我们可以处理表单提交成功的操作。
总结
通过以上步骤，我们已经实现了 React+Redux 下的表单数据处理。通过使用 Redux Store，我们可以将表单状态与全局状态保持同步，从而管理表单内部的状态。此外，我们还演示了如何将表单数据提交到后端服务器并处理返回的响应。
在实际应用中，我们还需要添加表单验证、错误处理等其他功能来保证表单数据的完整性和正确性。这些功能将在以下的学习和实践中逐渐深入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a62e7048841e98942c0ca1