在前端开发中，表单是非常常见的元素，它们用于接收用户输入的数据。在 React 应用中，我们通常使用 Redux 来管理应用的状态，包括表单数据。然而，处理表单数据并不是一件简单的事情，因此本文将介绍 Redux 中处理表单数据的最佳做法。
表单数据的结构
在 Redux 中处理表单数据时，我们需要考虑表单数据的结构。通常，表单数据可以表示为一个对象，其中每个属性对应一个表单元素。例如，一个登录表单可以表示为以下对象：
{ username: '', password: '' }
在用户输入时，我们需要更新这个对象的属性值。然而，Redux 中的状态不可变，因此我们需要使用纯函数来更新表单数据。下面是一个简单的 reducer，用于更新登录表单数据：
-- -------------------- ---- ------- -------- ------------------ - - --------- --- --------- -- -- ------- - ------ ------------- - ---- ------------------ ------ - --------- --------- -------------- -- ---- ------------------ ------ - --------- --------- -------------- -- -------- ------ ------ - -展开代码
在这个 reducer 中，我们使用了展开运算符来创建一个新的对象，并更新指定的属性。当用户输入用户名时，我们会触发一个 UPDATE_USERNAME 的 action，payload 为新的用户名。当用户输入密码时，我们会触发一个 UPDATE_PASSWORD 的 action，payload 为新的密码。
表单数据的验证
在处理表单数据时，我们通常需要对数据进行验证。例如，我们可能需要确保用户名和密码都不为空。在 Redux 中，我们可以使用 middleware 来处理表单数据的验证。
我们可以创建一个名为 validate 的 middleware，用于处理表单数据的验证。当用户提交表单时，我们会触发一个 SUBMIT_FORM 的 action。在 validate middleware 中，我们可以检查表单数据是否合法。如果表单数据不合法，我们可以触发一个 FORM_INVALID 的 action，否则我们会把表单数据传递给下一个 middleware。
下面是一个简单的 validate middleware：
-- -------------------- ---- ------- -------- ---------- --------- -------- -- - ------ -------------- - ------ ---------------- - -- ------------ --- -------------- - ----- ----- - ----------- ----- -------- - ---------------------- ----- -------- - ---------------------- -- ---------- -- ---------- - ---------- ----- --------------- -------- ------------ --- - ---- - ------------- - - ---- - ------------- - - - -展开代码
在这个 middleware 中，我们首先获取当前的 state，然后获取用户名和密码，并进行验证。如果表单数据不合法，我们会触发一个 FORM_INVALID 的 action，payload 为错误信息。否则，我们会把 SUBMIT_FORM 的 action 传递给下一个 middleware。
表单数据的处理
在处理表单数据时，我们通常需要将表单数据发送到服务器。在 Redux 中，我们可以使用 middleware 来处理表单数据的发送。
我们可以创建一个名为 submit 的 middleware，用于处理表单数据的发送。当用户提交表单时，我们会触发一个 SUBMIT_FORM 的 action。在 submit middleware 中，我们可以发送表单数据到服务器，并根据服务器的响应触发相应的 action。
下面是一个简单的 submit middleware：
-- -------------------- ---- ------- -------- -------- -------- -- - ------ -------------- - ------ ---------------- - -- ------------ --- -------------- - ----- ----- - ----------- ----- -------- - ---------------------- ----- -------- - ---------------------- ------------------- - ------- ------- ----- ---------------- --------- -------- --- -------- - --------------- ------------------ - ---------------- -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- - ------------ -- - ---------- ----- ---------------- -------- ---- --- -------------- -- - ---------- ----- ---------------- -------- ------------- --- --- - ---- - ------------- - - - -展开代码
在这个 middleware 中，我们首先获取当前的 state，然后获取用户名和密码，并将它们发送到服务器。如果服务器返回一个成功的响应，我们会触发一个 LOGIN_SUCCESS 的 action，payload 为服务器返回的数据。否则，我们会触发一个 LOGIN_FAILURE 的 action，payload 为错误信息。
总结
在 Redux 中处理表单数据需要考虑表单数据的结构、表单数据的验证和表单数据的处理。我们可以使用 reducer 来更新表单数据，使用 middleware 来处理表单数据的验证和发送。下面是一个完整的例子：
-- -------------------- ---- ------- -------- ------------------ - - --------- --- --------- -- -- ------- - ------ ------------- - ---- ------------------ ------ - --------- --------- -------------- -- ---- ------------------ ------ - --------- --------- -------------- -- -------- ------ ------ - - -------- ---------- --------- -------- -- - ------ -------------- - ------ ---------------- - -- ------------ --- -------------- - ----- ----- - ----------- ----- -------- - ---------------------- ----- -------- - ---------------------- -- ---------- -- ---------- - ---------- ----- --------------- -------- ------------ --- - ---- - ------------- - - ---- - ------------- - - - - -------- -------- -------- -- - ------ -------------- - ------ ---------------- - -- ------------ --- -------------- - ----- ----- - ----------- ----- -------- - ---------------------- ----- -------- - ---------------------- ------------------- - ------- ------- ----- ---------------- --------- -------- --- -------- - --------------- ------------------ - ---------------- -- - -- ------------- - ------ ---------------- - ---- - ----- --- -------------- - ------------ -- - ---------- ----- ---------------- -------- ---- --- -------------- -- - ---------- ----- ---------------- -------- ------------- --- --- - ---- - ------------- - - - - ----- ----- - ------------ ------------- ------------------------- ------- -- ---------------- ----- ------------------ -------- ------- --- ---------------- ----- ------------------ -------- -------- --- ---------------- ----- ------------- ---展开代码
在这个例子中，我们创建了一个名为 store 的 Redux store，并使用了 loginReducer、validate 和 submit middleware。我们先更新了用户名和密码，然后提交了表单数据。如果表单数据合法，并且服务器返回一个成功的响应，我们会触发一个 LOGIN_SUCCESS 的 action。否则，我们会触发一个 LOGIN_FAILURE 的 action。
在实际开发中，我们可以根据具体的需求来扩展这个例子，例如添加更多的表单元素、添加更多的验证规则等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/669001dfdc1ed1a61b4901e4
