什么是 @joearasin/redux-form
@joearasin/redux-form 是 React 和 Redux 的一款通用表单状态管理库，旨在通过 Redux store 来管理表单的状态，用于简化以及优化 React 前端开发者所遇到的表单相关问题，如表单验证，表单状态同步等。
安装和配置
使用 @joearasin/redux-form 需要安装两个依赖：react-redux 和 redux。在安装前需要你的项目已经安装了 React 和 Redux。以下是安装和配置的具体步骤：
npm install --save @joearasin/redux-form react-redux redux
安装完依赖后，需要在 Redux createStore 的时候来加上 @joearasin/redux-form 的 reducer。下面是具体代码实现：
import { combineReducers, createStore } from "redux";
import { reducer as formReducer } from "@joearasin/redux-form";
const rootReducer = combineReducers({
form: formReducer
});
const store = createStore(rootReducer);使用示例
最常见的情况下是我们需要一个表单，其中包含通过 TextField 组件输入的 email，以及通过 PasswordField 组件输入的 password。接下来，让我们在一个 React 组件中来渲染该表单：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ --------- - ---- ------------------------
----- --------- ------- --------- -
-------- -
------ -
----- -----------------------------------
-----
------ -----------------------------
------ ------------ ----------------- ------------ --
------
-----
------ -----------------------------------
------ --------------- ----------------- --------------- --
------
------- -----------------------------
-------
-
-
-
--------- - -----------
-- ----
----- -------
-------------
------ ------- ----------我们使用 Field 组件来渲染表单中的每个输入框，将组件的输出作为表单的值，即 onChange、onBlur 和 onFocus 事件都已经在内部处理好。同时，reduxForm 的高阶组件可以将表单值与 Redux store 中的表单状态同步。 在这个示例里，我们将表单命名为"login"，它将被连接到 store 的名称为 "form" 的状态分支内。
同时，我们需要对于表单提交事件进行处理。 接下来是表单提交的处理代码示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ --------- - ---- ------------------------
----- --------- ------- --------- -
------------ -
------------------
-
-------- -
------ -
----- ------------------------------------------------
-----
------ -----------------------------
------ ------------ ----------------- ------------ --
------
-----
------ -----------------------------------
------ --------------- ----------------- --------------- --
------
------- -----------------------------
-------
-
-
-
--------- - -----------
-- ----
----- -------
-------------
------ ------- ----------我们定义一个 submit 方法来处理表单提交，同时通过 reduxForm 函数将表单提交函数传入我们的组件中。
结论
@joearasin/redux-form 是一个灵活易使用的 React 和 Redux 表单状态管理库。它提供了一种简单的方式来管理表单状态，有效地解决了 React 中表单功能的一些难题。以上是使用示例， 我们可以通过这个库实现更高效的表单开发和管理，提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc7967216659e244545