在 React 中，表单数据的管理是非常重要的一环，而 Redux 则提供了一种可靠的方式来管理这些数据。本文将介绍如何在 React Redux 中管理表单数据，并提供一些实用的示例代码。
在 Redux 中管理表单数据
在 Redux 中，表单数据通常会被存储在 Redux store 中。我们可以使用一个 reducer 来管理表单数据的状态。下面是一个示例 reducer：
-- -------------------- ---- -------
----- ------------ - -
----- ---
------ ---
-------- --
-
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------------
------ -
---------
---------------------- --------------------
-
---- --------------
------ ------------
--------
------ -----
-
-这个 reducer 定义了三个表单输入域的初始状态，并通过处理 INPUT_CHANGE 和 FORM_SUBMIT 两个 action 来更新表单数据。INPUT_CHANGE action 由表单输入域改变时触发，包含了 name 和 value 两个参数。FORM_SUBMIT action 则在表单提交时触发，使表单重置为初始状态。
在组件中使用这个 reducer 很简单。我们只需要使用 connect() 函数将组件连接到 Redux store，并将 reducer 中的表单数据状态传入组件。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- ---- ------- --------------- -
----------------- - --- -- -
---------------------
----- ---------------
-------- - ----- -------------- ------ -------------- -
--
-
------------ - --- -- -
------------------
-- ---------
--------------------- ----- ------------- --
-
-------- -
------ -
----- -----------------------------
-------
-----
------
-----------
-----------
-----------------------
--------------------------------- --
--------
--- --
-------
------
------
------------
------------
------------------------
--------------------------------- --
--------
--- --
-------
--------
---------
--------------
--------------------------
--------------------------------- --
--------
--- --
------ ------------- -------------- --
-------
-
-
-
-------- ---------------------- -
------ -
----- ----------------
------ -----------------
-------- ------------------
-
-
------ ------- ------------------------------这个表单组件定义了两个方法：handleInputChange() 和 handleSubmit()。handleInputChange() 用于处理表单输入域的改变。它发送了一个 INPUT_CHANGE action，包含了被改变的输入域的 name 和 value。handleSubmit() 则在表单提交时触发。它阻止了表单默认行为并发送了 FORM_SUBMIT action。我们可以在这个方法中发送表单数据等操作。
我们还需要定义一个 mapStateToProps() 函数来将 reducer 中的表单数据状态映射到组件属性中。这个函数接受一个 state 参数，并返回一个对象。这个对象为组件的每个属性都定义了一个值，这些值是从 store 中获取的表单数据状态。最后，我们使用 connect() 函数将组件与 store 连接起来。
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - -------- - ---- -------------
------ ---- ---- --------
------ ----------- ---- ------------------------
----- ----- - ------------------------
----------------
--------- --------------
----- --
------------
-------------------------------
-最后，我们在 index.js 中创建一个 Redux store，并使用 Provider 组件将应用程序与 store 连接起来。这个 store 包含了用于管理表单数据的 reducer。
示例代码
下面是完整的示例代码。它包括了一个完整的表单组件和一个定义表单数据状态的 reducer。
-- -------------------- ---- -------
-- -----------------------
----- ------------ - -
----- ---
------ ---
-------- --
-
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------------
------ -
---------
---------------------- --------------------
-
---- --------------
------ ------------
--------
------ -----
-
-
------ ------- ------------- -------------------- ---- -------
-- ------------------
------ ----- ---- -------
------ - ------- - ---- -------------
----- ---- ------- --------------- -
----------------- - --- -- -
---------------------
----- ---------------
-------- - ----- -------------- ------ -------------- -
--
-
------------ - --- -- -
------------------
-- ---------
--------------------- ----- ------------- --
-
-------- -
------ -
----- -----------------------------
-------
-----
------
-----------
-----------
-----------------------
--------------------------------- --
--------
--- --
-------
------
------
------------
------------
------------------------
--------------------------------- --
--------
--- --
-------
--------
---------
--------------
--------------------------
--------------------------------- --
--------
--- --
------ ------------- -------------- --
-------
-
-
-
-------- ---------------------- -
------ -
----- ----------------
------ -----------------
-------- ------------------
-
-
------ ------- -------------------------------- -------------------- ---- -------
-- --------
------ - ----------- - ---- -------
------ - -------- - ---- -------------
------ ----- ---- -------
------ -------- ---- -----------
------ ---- ---- -------------------
------ ----------- ---- ------------------------
----- ----- - ------------------------
----------------
--------- --------------
----- --
------------
-------------------------------
-总结
在 React Redux 中管理表单数据非常容易。我们只需要定义一个 reducer 并连接组件到 store 中。通过发送 INPUT_CHANGE 和 FORM_SUBMIT 两个 action，我们可以很容易地管理和更新表单数据状态。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ff62d48841e9894e1a3cf