redux-form-actions 是一个 redux-form 的辅助库，提供了一系列的工具函数，用于简化表单之间的交互和数据同步。
安装
在项目目录下运行以下命令：
--- ------- ------------------
使用
创建 action creator
使用 redux-form-actions 函数可以简化 action creator 的创建，并自动生成 meta 数据：
------ - ---------------- - ---- --------------------- -- -- ------ ------- ----- ---------- - ------------------------- -- -- ------ ------- ------------ ---- ---
其中 "NAME" 是表单名称。
创建 reducer
使用 redux-form-actions 可以很方便地创建 reducer：
------ - ----------------- - ---- --------------------- -- -- ------- ----- ----------- - -------------------------- ------ ------- ----------------- ----- ----------- ---
将 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