redux-form-actions 是一个 redux-form 的辅助库，提供了一系列的工具函数，用于简化表单之间的交互和数据同步。
安装
在项目目录下运行以下命令：
npm install redux-form-actions
使用
创建 action creator
使用 redux-form-actions 函数可以简化 action creator 的创建，并自动生成 meta 数据：
import { createFormAction } from "redux-form-actions";
// 创建 action creator
const submitForm = createFormAction("NAME");
// 调用 action creator
submitForm({ data });其中 "NAME" 是表单名称。
创建 reducer
使用 redux-form-actions 可以很方便地创建 reducer：
import { createFormReducer } from "redux-form-actions";
// 创建 reducer
const formReducer = createFormReducer("NAME");
export default combineReducers({ form: formReducer });将 handleSubmit 传递到组件
在表单组件中，需要将 redux-form 提供的 handleSubmit 函数封装一下，以便使用 redux-form-actions 提供的 submitForm 函数：
-- -------------------- ---- -------
------ - --------- - ---- -------------
------ - ------- - ---- --------------
------ - ---------- - ---- ---------------------
----- ---- - ----- -- -
----- ------------ - - -- -
-------------------
-- -- ------------------ --- ---------- --
---------------------------------
--
------ -
----- ------------------------
--- ---- ---
-------
--
--
------ ------- --------
-----
- ---------- -
------------- ----- ------ ----------其中 formName 必须和之前创建的 action 中的名称相同，即为 "NAME"。
处理表单提交
redux-form-actions 提供了多种方式处理表单提交的结果，例如在 success 和 error 时分别触发不同的 action：
-- -------------------- ---- -------
------ - ---------------- - ---- ---------------------
-- --------- -------
----- ----------- - -----------------
-------
-
---------- ----- -- -- --------- -------- ---- ---
---------- ------- - ------- -- -- --
---------
-------- ------
-------- -------
---
-------- ------- - ------- -- -- --
---------
-------- ------
------ -------
--
--
--
--
------ ------- ----------------- ----- ----------- ---上面的 reducer 会在表单提交成功和失败时分别触发不同的操作。
示例代码
下面是一个完整的示例代码，在这个示例中，我们创建了一个包含 username 和 password 输入框的登录表单，点击提交按钮触发表单提交动作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --------- - ---- -------------
------ - ------- - ---- --------------
------ - ------- - ---- --------
------ - ----------------- ------------------ ---------------- - ---- ---------------------
------ - --------------- - ---- --------
-- -- ------ -------
----- --------------- - --------------------------
-- --------- -------
----- ----------- - -----------------
--------
-
---------- ----- -- -- --------- -------- ---- ---
---------- ------- - ------- -- -- --
---------
-------- ------
----------- -----
----- -------
---
-------- ------- - ------- -- -- --
---------
-------- ------
------ -------
--
--
--
--
------ ------- ----------------- ----- ----------- ---
----- --------- - ----- -- -
----- - ------------ - - ------
----- -------- - ------ -- -
-- -- ------------------ --- --------------- --
------------------------------
--
------ -
----- ----------------------------------
-----
------ -----------------------------------
------ --------------- ----------------- ----------- --
------
-----
------ -----------------------------------
------ --------------- ----------------- --------------- --
------
------- -----------------------------
-------
--
--
----- ------- - --------
--------
-----
- --------------- -
--
----------- ----- ----------- --
--
------ ------- -------------------你可以在项目中使用这个示例代码作为参考，创建更加复杂和完整的表单组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d03