表单处理在 Web 开发中是非常常见的任务。在 React 和 Redux 生态系统中，如何处理表单数据一直是一个让人头疼的问题。Redux 中的表单处理最佳实践可以帮助我们更好地管理表单状态，使应用程序的开发更加高效和可靠。
为什么使用 Redux 处理表单？
在 React 中处理表单时，使用本地状态来保存表单数据并响应 onChange 事件可能是最常见的方法。但是，表单的实际处理可能需要在表单中的多个组件之间共享数据。此时，Redux 可以提供一个全局的状态管理器来保存表单数据，以便更好地处理和维护表单状态。
第一步：为表单创建 Redux 状态
我们可以通过一个专门的 Redux reducer 来创建和管理表单状态。首先，我们需要定义一个初始状态对象，包含表单的所有字段和相关的状态（如正在加载、验证错误等）。
-- -------------------- ---- -------
-- --------------
----- ------------ - -
--------- ---
--------- ---
---------- ------
------- ---
-------------- ------
--
----- ----------- - ------ - ------------- ------- -- -
-- ----- ------ --------
------ ------------- -
---- -------------------
------ -
---------
------------------- ------------------
--
---- --------------------------
------ -
---------
---------- -----
------- ---
-------------- ------
--
---- --------------------------
------ -
---------
---------- ------
------- ---
-------------- -----
--
---- --------------------------
------ -
---------
---------- ------
------- --------------
-------------- ------
--
--------
------ ------
-
--
------ ------- ------------第二步：创建 Redux actions
然后，我们需要创建一组功能性的 Redux actions，以便更新表单状态。这些操作类型应包括更新单个表单字段的数据、表单提交开始、表单提交成功和表单提交失败。
-- -------------------- ---- -------
-- --------------
----- -------------- - ----------- ----------- -- --
----- -------------------
----------
-----------
---
----- --------------------- - -- -- --
----- --------------------------
---
----- --------------------- - -- -- --
----- --------------------------
---
----- --------------------- - -------- -- --
----- --------------------------
-------
---
----- ---------- - ---------- -- ----- ---------- -- -
----------------------------------
--- -
-- --------
----- -------- - ----- ------------------------- -
------- -------
----- ---------
---
-- ------------- -
----------------------------------
- ---- -
----- ------ - ----- ----------------
----------------------------------------
-
- ----- ----- -
----------------------------------
-
--
------ - --------------- ---------- --第三步：连接表单和 Redux 状态
最后，我们需要使用 React-Redux 提供的高阶组件 connect 来将表单组件连接到 Redux 状态。我们将创建一个动态的状态映射器，以便将表单状态中的特定字段映射到组件的 props 属性中。
-- -------------------- ---- -------
-- -------
------ - ------- - ---- --------------
------ - --------------- ---------- - ---- ----------------
----- ---- - ------- -- -
----- - --------- --------- ---------- ------- --------- -------- - - ------
----- ------------ - ----- ------- -- -
-----------------------
----- -------- - --- -----------------------
-------------------
--
----- ----------------- - ------- -- -
----- - ----- ----- - - -------------
-------------- -------
--
------ -
----- ------------------------
------ ----------- --------------- ---------------- ---------------------------- --
------ --------------- --------------- ---------------- ---------------------------- --
------- ------------- ------------------------------------
---------- -- ----------------------
---------------- -- -----------------------------
---------------- -- -----------------------------
-------
--
--
----- --------------- - ------- -- --
--------- --------------------
--------- --------------------
---------- ---------------------
------- ------------------
---
----- ------------------ - ---------- -- --
--------- ----------- ----------- -- ---------------------------------- -------------
--------- ---------- -- -------------------------------
---
------ ------- ------------------------ --------------------------现在，我们已经成功地将表单组件连接到 Redux 状态了。当表单中的数据更改时，Redux 状态对象将更新，同时更新组件的 props 属性，使其自动重新渲染。此外，通过 Redux，我们可以在整个应用程序中管理表单状态，而不必在各个组件间传递数据。
总结
Redux 中的表单处理最佳实践可以帮助我们更好地管理表单状态，使应用程序的开发更加高效和可靠。需要注意的是，在 Redux 中处理表单需要创建初始状态，创建一组功能性的 Redux actions 和使用 React-Redux 提供的 Connect 技术来连接表单和 Redux 状态，但这种方法可以为我们提供更强大和高效的表单处理能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481718248841e98940e653e