介绍
redux-duck-form 是一个基于 Redux 和 React 的表单管理库。它通过 Redux 的机制进行状态管理，在 React 上提供了一种简单、灵活的方式来管理表单的数据和验证。
安装
使用 npm 安装：
--- ------- --------------- ------
使用示例
初始化
使用 reducer 作为表单的状态管理器，初始化表单状态：
------ - --------------- - ---- --------
------ - ----------------- - ---- ------------------
----- ----------- - -----------------
----------- -------------------------------
-- ----------------- --------------------------
---
----- ----------- - -----------------
----- -----------
---
------ ------- ------------createFormReducer 会返回一个用于管理表单的 reducer 函数，传入 formKey 可以标识出该表单在整个应用中的唯一性。
表单类型和字段
定义表单的类型和字段，可以通过 redux-duck-form 提供的 higher order component（HOC）createForm 配合表单控件的名字注册到 redux store 上。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------------
----- ---------- ------- --------------- -
-------- -
----- - ----- ------------ - - -----------
------ -
-----
------ -----------
------------
------------------
----------- -- --------------------- ----------------
--
------ ---------------
---------------
---------------------
----------- -- ------------------------ ----------------
--
------
--
-
-
------ ------- ------------- - ---------- ---------------在此例中，connect() 用于将 React 组件和 Redux store 连接。createForm 是高阶函数，用于将表单控件和 formKey 注册到 Redux store 上。
将表单数据和验证规则和 UI 绑定
redux-duck-form 提供了 HOC bindFormItem，可以将表单字段与 Redux store 绑定，如下所示：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------- ------------ - ---- ------------------
----- ---------- ------- --------------- -
-------- -
----- - ----- ------ -------- - - -----------
------ -
-----
------ -----------
-----------
-------------
-------------------
--
------
--
-
-
------ ------- ------------- -
-----------
------------ -- ---- ------- -------------
----------------------------- -- --------其中，bindFormItem 可以自动将 value 和 onChange 的属性注入到表单控件中，实现了数据和 UI 的绑定。
表单验证规则
通过在 reducer 上定义 validate 方法，可以实现表单验证：
----- ----------- - -----------------
----------- ------------------------------- -
-- --------
--------- ------- ------ ----- -- -
-- ------------- -
------ ------ -- ----------
-
-- --------------------------- -
------ ------ -- ---------
-
-- ---------------- -
------ --------- -- ----------
-
-- --------------------- - -- -
------ --------- ---- -- -- ----- - ------------
-
------ -----
-
--
-- ----------------- -------------------------- --------
---结论
redux-duck-form 提供了在 React 项目中管理表单状态和验证的标准化解决方案。通过它，我们可以轻松地根据需要定义表单类型、字段、验证规则，减少了代码的冗余，提高了组件的可复用性和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cd181e8991b448e65ea