什么是 redux-form-manager
redux-form-manager 是基于 redux-form 建立的表单管理库，主要解决在表单操作多的时候难以管理的问题。这个库提供了一些基础的表单管理功能，通过统一的定义方式和处理方式，让表单管理更加高效。
redux-form-manager 的安装
首先需要在项目中安装 redux-form 和 redux-form-manager：
npm install --save redux-form redux-form-manager
redux-form-manager 的使用
下面我们来看一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------
------ - ----------- - ---- ---------------------
----- -------- - -- -- -
----- ---- - -
- ----- --------- ------ ------ -- --
- ----- --------- ------ ------ -- --
- ----- --------- ------ ------ -- --
--
----- ---------------- - ----------------------- ------
------ -
-----
----- -----------------------------------------
-----
------ ----------------------------------------------
------ ------------------- ----------------- ----------- --
------
-----
------ ----------------------------------------------
------ ------------------- ----------------- ----------- --
------
-----
------ ----------------------------------------------
------ ------------------- ----------------- ----------- --
------
------- -----------------------------
-------
------
--
--
------ ------- ---------在上面的代码中，通过 FormManager 方法创建了一个表单管理器，然后通过 data 定义了表单的数据。
使用该表单，只需要在表单的 handleSubmit 方法中调用 redux-form-manager 提供的 handleSubmit 方法即可。
redux-form-manager 的进阶使用
在很多情况下，我们需要对表单做一个 Loading 状态的管理，来防止表单的多次提交和用户的操作干扰。
下面我们针对这个应用场景来做一个示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------
------ - ----------- - ---- ---------------------
----- ------------------- ------- --------------- -
------------------ -
-------------
---------- - - ---------- ----- --
------------- - -------------------------
-
---------------- -
----- - ---------------- - - -----------
--------------- ---------- ---- ---
------------- -- -
--------------------------------------
--------------- ---------- ----- ---
-- ------
-
-------- -
----- ---- - -
- ----- --------- ------ ------ -- --
- ----- --------- ------ ------ -- --
- ----- --------- ------ ------ -- --
--
----- - --------- - - -----------
----- ---------------- - ---------------------------------- ------
------ -
-----
----- -----------------------------------------
-----
------ ----------------------------------------------
------ ------------------- ----------------- ----------- --
------
-----
------ ----------------------------------------------
------ ------------------- ----------------- ----------- --
------
-----
------ ----------------------------------------------
------ ------------------- ----------------- ----------- --
------
------- ------------- ------------------------------- - --------------- - ------------------
-------
------
--
-
-
------ ------- --------------------从上面的代码中，我们可以看到，在表单数据提交的时候，通过标记 isLoading 来处理表单数据提交的流程。这样的方式让我们在表单进行多次提交时，能够更好的控制表单的提交和 loading 状态。
结语
通过本文的介绍和示例代码，我们可以发现 redux-form-manager 帮我们实现了诸多的表单管理功能，提供了一种高效并且统一的方式来管理表单。
这对于表单较多的项目，能够让我们更好的进行表单管理，从而更快、更好地完成项目的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728f81e8991b448e8c54