介绍
redux-manifest 是一个从表单数据到 Redux 状态的映射工具。它可以将表单数据自动和映射到 Redux 状态中，并且自动处理表单验证，错误信息和异步请求。
安装
使用 npm 安装 redux-manifest：
npm install --save redux-manifest
示例
下面展示一个简单的例子，其中包含一个表单和提交按钮，我们使用 redux-manifest 将表单数据映射到 Redux 状态。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- ----- - ---- -------------
------ -------- ---- -----------------
----- ------ ------- --------- -
-------- -
----- - ------------- ---------- - - -----------
------ -
----- ------------------------
-----
------ ------------------------- ------------
------ ---------------- ----------------- ----------- --
------
-----
------ ----------------------- ------------
------ --------------- ----------------- ----------- --
------
------- ------------- ----------------------
------
---------
-------
--
-
-
------ - -----------
----- ---------
-----------
----- ------------------ - ---------- -- --
--------- -------- -- ---------- ----- -------------- -------- ------ ---
---
------ ------- ------------- --------------------------------------这里我们定义了一个 MyForm 组件，包含了两个输入框和一个提交按钮。通过连接到 Redux，我们能够将用户输入的数据在表单提交时发送到服务器。
使用 reduxForm 函数将 MyForm 包装，以便使用 Redux 状态管理。我们将表单的名称指定为 myForm。
使用 mapDispatchToProps 函数连接到 Redux store，定义一个 onSubmit 函数，以在表单提交时调用。
最后，将 MyForm 组件使用 manifest 高阶组件进行包装，以便使用 redux-manifest 自动进行表单数据到 Redux 状态的映射。
高级用法
redux-manifest 提供了丰富的配置选项，以便自定义表单数据到 Redux 状态的映射。下面是一些常见的高级用法示例。
处理错误信息和表单验证
-- -------------------- ---- -------
------ - --------------- - ---- -------------
----- -------- - ---------- -- -
------ ---
---------------------
---------------- -- -
-- ----------------- -
----- ------ - ---
------------------------------- -- -
------------------- - --------------
---
----- --- ------------------------
-
---
--
------ ------- ------------------------ ------------------------------------ - -------- ----在这个例子中，我们使用 onSubmit 函数提交表单数据。如果服务器返回错误信息，我们使用 SubmissionError 异常将错误信息提交到 Redux store，以便 redux-form 组件可以自动处理错误信息。
处理异步请求
-- -------------------- ---- -------
------ - --------------- - ---- -------------
----- -------- - ---------- --------- -- -
---------- ----- ------------ ---
------ ---
---------------------
-------- -- -
---------- ----- ----------- ---
--
-------------- -- -
---------- ----- ------- ---
----- --- --------------------------------------------
---
--
------ ------- ------------------------ ------------------------------------ - -------- ----在这个例子中，我们使用 onSubmit 函数提交表单数据。我们在提交时发送一个 dispatch（type: 'SUBMITTING'）到 Redux store，并在表单提交成功或失败时使用 dispatch 更新 store（type: 'SUBMITTED' 和 type: 'ERROR'）。
如果服务器返回错误信息，我们使用 SubmissionError 异常将错误信息提交到 Redux store，以便 redux-form 组件可以自动处理错误信息。
结论
redux-manifest 提供了一种简单而强大的方式，将表单数据映射到 Redux 状态中。它处理了表单验证、错误信息和异步请求，并提供了丰富的配置选项以满足自定义需求。在您的下一个 React 项目中，考虑使用 redux-manifest 来简化表单数据处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8aed
