Redux-Form 是一个基于 Redux 和 React 的表单数据管理工具。它可以帮助开发者更轻松地处理表单数据和表单交互。本文将介绍 Redux-Form 的基本用法和实践经验。本文需要读者具备 React 和 Redux 的基础知识。
为什么需要 Redux-Form
表单是 Web 应用中常用的交互组件，但是表单数据管理却不是那么容易。一些困难点包括：
- 表单数据存储位置不明确。
- 表单校验和处理逻辑混杂在组件中或者组件外的代码中，使得代码维护难度大。
- 表单交互事件的处理较为繁琐。
Redux-Form 解决了这些问题。Redux-Form 将表单数据存储在 Redux 中，这使得表单数据的存储位置明确定义且便于管理。此外，Redux-Form 还提供了表单校验和处理的机制，这使得表单校验和处理逻辑可以和表单组件逻辑分离开，从而提高代码的可读性和可维护性。Redux-Form 还提供了简单易用的 API，可以轻松地处理表单交互事件。
Redux-Form 基本用法
安装
首先，需要安装 Redux-Form：
npm install --save redux-form
表单组件
在使用 Redux-Form 之前，需要编写表单组件。这个表单组件可以是一个普通的 React 组件，只是需要特别地处理一些事件，比如提交表单时的事件。下面是一个简单的表单组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
----- ---------- - ----- -- -
----- - ------------ - - ------
------ -
----- ------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
--
------ ------- ----------- ----- -------- ---------------注意到上面的表单组件中使用了 Redux-Form 的两个组件：Field 和 reduxForm。
Field 组件可以帮助我们处理表单元素的事件。它的属性包括：
name：表单元素的名称。component：表单元素的组件。可以是input、select、textarea等 HTML 元素，也可以是自定义的组件。
reduxForm 是连接表单组件和 Redux 的组件。它的属性包括：
form：表单的名称，为字符串类型。
表单数据
现在已经有了一个表单组件，但是我们还需要存储表单数据。Redux-Form 会在 Redux 的 Store 中为表单创建一个 State，这个 State 的名称与表单的名称相同。例如，上面的表单组件的名称是 simple，那么，Redux-Form 会在 Redux 的 Store 中创建一个名为 simple 的 State。
我们可以将 Redux 的 Store 和 React 应用连接起来，这样就可以在表单组件中访问 Redux 的 Store。这个连接过程可以使用 Provider 组件来完成。假设我们已经编写了一个 App 组件，它连接了 Redux 的 Store，我们可以在这个组件中使用 Provider 组件。下面是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ---------- ---- ---------------
----- ----- - ---------------------
----- --- - ----- -- -
------ -
--------- --------------
----------- --
-----------
--
--
------ ------- ----在这个例子中，Provider 的 store 属性被设置为 Redux 的 Store。这样，我们就可以在 SimpleForm 组件中访问 Redux 的 Store。
处理表单提交
处理表单提交是一个比较复杂的问题。Redux-Form 提供了一个名为 handleSubmit 的函数，它可以处理表单提交。handleSubmit 函数会先校验表单数据是否合法，然后将表单数据存储到 Redux 的 Store 中。
下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
----- ---------- - ----- -- -
----- - ------------ - - ------
----- ------ - ------ -- -
--------------------
--
------ -
----- --------------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
--
------ ------- ----------- ----- -------- ---------------在这个例子中，handleSubmit 的参数是一个函数。这个函数会在表单提交时被调用，它的参数是表单数据。
注意到，在 reduxForm 中，form 属性的值仍然是 simple。这个属性会告诉 Redux-Form，要将表单数据存储在 Redux 的名为 simple 的 State 中。
数据校验
Redux-Form 还提供了数据校验功能。在 Field 组件中，可以添加一个 validate 函数。这个函数会在表单提交之前被调用，如果校验失败，表单数据将不会被提交到 Redux 的 Store 中，而是会返回一个错误信息。
下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
----- ---------- - ----- -- -
----- - ------------ - - ------
----- ------ - ------ -- -
--------------------
--
----- -------- - ------ -- -
----- ------ - ---
-- ------------------- -
---------------- - -----------
-
-- ------------------ -
--------------- - -----------
-
------ -------
--
------ -
----- --------------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
--
------ ------- ----------- ----- --------- -------- ---------------在这个例子中，我们在 reduxForm 中添加了一个 validate 属性。这个属性是一个函数，它会在表单提交之前被调用。这个函数会接收一个包含表单数据的对象，返回一个对象，这个对象的属性名与表单元素的 name 属性相同，如果校验不通过，这个属性对应的值为错误信息。在这个例子中，我们校验了 firstName 和 lastName 是否为空。
表单初始化
有时候，我们需要在表单组件初始化时设置表单元素的值。Redux-Form 提供了 initialValues 属性，可以设置表单元素的初始值。
下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
----- ---------- - ----- -- -
----- - ------------ - - ------
----- ------ - ------ -- -
--------------------
--
----- ------------- - -
---------- -------
--------- -----
--
------ -
----- --------------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- -----------------------------
-------
--
--
------ ------- ----------- ----- --------- ------------- ---------------在这个例子中，我们在 reduxForm 中添加了一个 initialValues 属性。这个属性的值是一个对象，这个对象的属性名与表单元素的 name 属性相同，属性值就是表单元素的初始值。在这个例子中，我们把 firstName 和 lastName 的初始值设置为 John 和 Doe。
Redux-Form 实践经验
分离表单组件和显示组件
Redux-Form 可以帮助我们更好地管理表单数据和表单交互，但是它并不能替代显示组件。因此，建议将表单组件和显示组件分开，并使用 connect 函数将它们连接起来。这样可以提高代码的可读性和可维护性。
下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ ---- ---- ---------
----- ------- - ----- -- -
----- - ---------- -------- - - ------
------ -
-----
-------- ----- ---------------
------- ----- --------------
------
--
--
----- --------------- - ----- -- -
----- - ---------- -------- - - --------------------
------ -
----------
--------
--
--
------ ------- ----------------------------------在这个例子中，我们定义了一个 Display 组件，这个组件用于展示表单数据。在 mapStateToProps 函数中，我们从 Redux 的 Store 中取出表单数据。
使用 Selectors
使用 Selectors 可以让代码更加清晰和易于维护。Selects 用于从 State 中获取数据，在 Redux 应用中非常常用。同样地，在 Redux-Form 应用中，我们也可以使用 Selectors。比如，我们可以使用 formValueSelector 函数来获取特定表单元素的值。
下面是一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------------- - ---- -------------
------ ---- ---- ---------
----- ------- - ----- -- -
----- - ---------- -------- - - ------
------ -
-----
-------- ----- ---------------
------- ----- --------------
------
--
--
----- --------------- - ----- -- -
----- -------- - ----------------------------
----- --------- - --------------- -------------
----- -------- - --------------- ------------
------ -
----------
--------
--
--
------ ------- ----------------------------------在这个例子中，我们使用了 formValueSelector 函数来获取表单元素的值。formValueSelector 函数的第一个参数是表单的名称，第二个参数是表单元素的名称。通过这个函数，我们可以从 Redux 的 Store 中很方便地获取表单元素的值。
自定义表单元素
有时候，我们需要使用自定义的表单元素，Redux-Form 可以很方便地支持这个需求。
自定义表单元素需要实现以下两个方法：
onChange(event): 这个方法接收一个事件对象，用于更新表单元素的值。onBlur(event): 这个方法接收一个事件对象，用于表单元素失去焦点时的处理。
下面是一个自定义的表单元素：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- - ----- -- -
----- - ----- - - ------
----- ------------ - ----- -- -
-----------------------------------
--
----- ---------- - ----- -- -
---------------------------------
--
------ -
------
-----------
----------
-----------------------
-------------------
--
--
--
------ ------- ------------在这个例子中，我们定义了一个 CustomInput 组件，它继承了 Redux-Form 的 input 属性。CustomInput 组件中有两个方法：handleChange 和 handleBlur。这两个方法会在组件的 onChange 和 onBlur 事件中被调用。我们在这两个方法中使用 input.onChange 和 input.onBlur 方法来更新表单元素的值和处理表单元素失去焦点的事件。注意，我们使用了 ES6 对象展开运算符 ...input 来将 Redux-Form 的 input 属性传递给 input 元素。
在定义表单组件时，我们使用自定义的表单元素：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ ----------- ---- ----------------
----- ---------- - ----- -- -
----- - ------------ - - ------
----- ------ - ------ -- -
--------------------
--
------ -
----- --------------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------------- ----------- --
------
------- -----------------------------
-------
--
--
------ ------- ----------- ----- -------- ---------------在这个例子中，我们在 Field 组件中使用了 CustomInput 组件。由于 CustomInput 组件继承了 Redux-Form 的 input 属性，因此，在 Field 组件中不需要传递其他属性。
使用第三方表单库
Redux-Form 可以很方便地与第三方表单库一起使用。比如，React-Bootstrap 是一个非常流行的 UI 库，它包含了许多常用的表单组件。下面是一个使用 React-Bootstrap 和 Redux-Form 的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ - ------- ---- - ---- ------------------
----- ---------- - ----- -- -
----- - ------------ - - ------
----- ------ - ------ -- -
--------------------
--
------ -
----- --------------------------------
----------- ----------------------
----------------- -----------------
------ ---------------- ------------------------ ----------- --
-------------
----------- ---------------------
---------------- -----------------
------ --------------- ------------------------ ----------- --
-------------
------- ----------------- --------------
------
---------
-------
--
--
------ ------- ----------- ----- -------- ---------------在这个例子中，我们使用了 React-Bootstrap 的 Form、Form.Group、Form.Label 和 Button 组件。在 Field 组件中，我们使用了 Form.Control 组件。由于 Form.Control 继承了 input 属性，因此，我们可以很方便地将 Field 组件和 Form.Control 组件连接起来。
总结
Redux-Form 是一个表单数据管理工具，它可以帮助开发者更好地管理表单数据和表单交互。Redux-Form 可以很方便地与 React 应用和 Redux 应用配合使用。本文介绍了 Redux-Form 的基本用法和实践经验。希望本文可以帮助读者更好地理解和使用 Redux-Form。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7ddc0f6b2d6eab33532ff