什么是 redux-from-to？
redux-from-to 是一款基于 Redux 的表单处理工具，用于简化 Redux 应用中的表单处理流程。使用 redux-from-to，你可以轻松地创建和管理 Redux 表单，从而减少冗余代码和维护工作。
如何安装和使用？
安装：
使用 npm 安装：
npm install redux-from-to
使用 yarn 安装：
yarn add redux-from-to
使用：
首先，在你的 Redux 应用中引入 redux-from-to：
import { createForm } from 'redux-from-to';然后，创建一个表单：
const form = createForm({
initialValues: {
name: '',
email: '',
website: '',
},
onSubmit: values => console.log(values),
});在上面的代码中，我们创建了一个名为 form 的表单，并设置了初始值和提交时的回调函数。
接下来，在你的组件中使用表单，你可以使用 redux-from-to 提供的两个高阶组件：connectForm 和 withForm。
- connectForm
connectForm 可以将表单与 Redux store 连接起来，以便在组件中访问表单值和提交表单。
-- -------------------- ---- -------
------ - ----------- - ---- ----------------
-------- ------------- -
----- - ------- ------------- ------------ - - ------
------ -
----- ------------------------
------ ----------- ------------------- ----------------------- --
------ ------------ -------------------- ----------------------- --
------ -------------- ---------------------- ----------------------- --
------- -----------------------------
-------
--
-
------ ------- --------------------------在上面的代码中，我们通过高阶组件 connectForm 将表单与 MyForm 组件连接起来。在组件中，我们可以通过 props 获取表单的值，并在表单值改变时触发 handleChange 函数，提交表单时触发 handleSubmit 函数。
- withForm
withForm 可以将表单作为 props 传递给组件，以便在组件中自由定制表单样式和行为。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
-------- ------------- -
----- - ----- ------------ - - ------
------ -
----- ------------------------
------ ----------- ------------------------ ---------------------------- --
------ ------------ ------------------------- ---------------------------- --
------ -------------- --------------------------- ---------------------------- --
------- -----------------------------
-------
--
-
------ ------- -----------------------在上面的代码中，我们通过高阶组件 withForm 将表单作为 props 传递给 MyForm 组件。在组件中，我们可以通过 props.form 获取表单对象，并根据需要自由地定制表单样式和行为。
示例代码
下面是一个完整的示例代码，展示了如何使用 redux-from-to 处理表单。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - ----------- ----------- - ---- ----------------
----- ----- - ------------------ - --- ------- -- -
------ ------------- -
---- --------------
----------------------------
------ ------
--------
------ ------
-
---
----- ---- - ------------
-------------- -
----- ---
------ ---
-------- ---
--
--------- ------ -- ---------------- ----- -------------- -------- ------ ---
---
-------- ------------- -
----- - ------- ------------- ------------ - - ------
------ -
----- ------------------------
------ ----------- ------------------- ----------------------- --
------ ------------ -------------------- ----------------------- --
------ -------------- ---------------------- ----------------------- --
------- -----------------------------
-------
--
-
----- ------------- - --------------------------
-------- ----- -
------ -
--------- --------------
-------------- --
-----------
--
-
------ ------- ----在上面的代码中，我们首先创建了一个 Redux store，并引入了 redux-from-to 提供的两个高阶组件：createForm 和 connectForm。
然后，我们创建了一个名为 form 的表单，并设置了初始值和提交时的回调函数。接着，我们通过 connectForm 将表单和 MyForm 组件连接起来，在组件中访问表单的值和提交表单，最后在 Redux store 触发 SUBMIT_FORM action，将表单值输出到控制台。
在 App 组件中，我们使用 Provider 将 Redux store 包装起来，将 ConnectedForm 渲染到 DOM 中。
总结
通过使用 redux-from-to，我们可以轻松地创建和管理 Redux 表单，从而简化了 Redux 应用中的表单处理流程。同时，redux-from-to 还提供了 connectForm 和 withForm 两个高阶组件，方便我们在组件中自由定制表单样式和行为。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0bdb