Redux 如何管理表单输入和提交
前言
在前端开发中，表单是一个不可避免的部分。我们需要收集用户输入的数据，然后将其发送到服务器进行处理。在 React 应用中，我们可以使用 Redux 来管理表单输入和提交。Redux 提供了一种统一的方式来管理应用程序的状态，包括表单数据。
Redux 的工作原理
在使用 Redux 管理表单输入和提交之前，我们需要了解 Redux 的工作原理。Redux 的核心概念包括 Store、Action 和 Reducer。
- Store：是一个存储应用程序状态的对象。它是唯一的，并且可以被访问和更新。
- Action：是描述应用程序状态变化的对象。它们是纯粹的 JavaScript 对象，包含一个 type 字段和一个可选的 payload 字段。
- Reducer：是一个纯函数，接受先前的状态和一个 action，并返回一个新的状态。它们被用于更新 store 中的状态。
Redux 管理表单输入和提交的步骤
- 创建 Action
首先，我们需要创建一个 Action，它描述表单的输入。我们可以使用一个普通的 JavaScript 对象来表示它。例如：
const updateFormInput = (name, value) => ({
type: 'UPDATE_FORM_INPUT',
payload: { name, value },
});上述代码中，我们创建了一个名为 updateFormInput 的函数，它接受两个参数，即表单输入的名称和值。该函数返回一个包含 type 和 payload 字段的对象，用于描述表单输入的更新。
- 创建 Reducer
接下来，我们需要创建一个 Reducer，它将处理 Action 并更新 store 中的状态。下面是一个简单的 Reducer 示例：
-- -------------------- ---- -------
----- ------------ - -
----- ---
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ -
---------
----- -
--------------
---------------------- ---------------------
--
--
--------
------ ------
-
--上述代码中，我们定义了一个名为 formReducer 的函数，它接受两个参数，即先前的状态和一个 action。在 switch 语句中，我们检查 action 的类型是否为 UPDATE_FORM_INPUT。如果是，我们将更新表单中输入的值，并返回一个包含更新后的状态的新对象。
- 创建 Store
现在，我们需要创建一个 Store，用于存储应用程序的状态。我们可以使用 createStore 函数来创建一个 Store。例如：
import { createStore } from 'redux';
import formReducer from './reducers/formReducer';
const store = createStore(formReducer);上述代码中，我们导入 createStore 函数并将 formReducer 作为参数传递给它。然后，我们创建了一个名为 store 的对象，用于存储应用程序的状态。
- 连接表单组件
最后，我们需要将表单组件连接到 Redux Store。我们可以使用 connect 函数来实现这一点。例如：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------------- - ---- ------------------------
----- --------------- - ------- -- --
----- -----------
---
----- ------------------ - -
----------------
--
----- ---- - -- ----- --------------- -- -- -
----- ----------------- - ------- -- -
----- - ----- ----- - - -------------
--------------------- -------
--
------ -
------
------ ----------- ---------------- ---------------------- ---------------------------- --
------ ----------- --------------- --------------------- ---------------------------- --
------- -----------------------------
-------
--
--
------ ------- ------------------------ --------------------------上述代码中，我们定义了一个名为 Form 的组件，它接受两个 props，即 form 和 updateFormInput。我们使用 mapStateToProps 函数将 store 中的状态映射到组件的 props 中。然后，我们使用 mapDispatchToProps 函数将 updateFormInput Action 映射到组件的 props 中。最后，我们使用 connect 函数将组件连接到 Redux Store。
结论
Redux 提供了一种统一的方式来管理应用程序的状态，包括表单数据。通过创建 Action、Reducer 和 Store，并将表单组件连接到 Redux Store，我们可以轻松地管理表单输入和提交。这种方法具有可扩展性和可维护性，并且可以让我们更好地控制应用程序的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673ec6a290e7ed93bee4aebb