引言
Redux 是一个流行的 JavaScript 应用程序状态管理库。在 Redux 中，我们可以使用 reducer 函数来管理应用程序的状态。当我们的应用程序有一个数组类型的状态，并且需要更新某个特定项中的值时，这可能会变得复杂。这篇文章将介绍如何在 Redux 状态中更新特定数组项中的单个值。
问题描述
假设我们有以下 Redux 状态：
-
------ -
- --- -- ----- ------- ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- ------ ---- -- -
-
-现在我们想要更新 id 为 2 的用户的年龄为 26。该怎么办？
解决方案
首先，我们需要编写一个 reducer 函数来处理此操作。在这个 reducer 函数中，我们将循环遍历数组，并找到匹配的项。一旦找到它，我们将创建一个新的对象，并将要更改的值更新为新的值。同时，我们还需要返回一个新的数组，以便 Redux 可以检测到状态已更改。
下面是一个示例 reducer 函数：
-------- ------------------ - - ------ -- -- ------- -
------ ------------- -
---- ------------------
----- ------------ - -------------------- -- -
-- -------- --- ------------------ -
------ - -------- ---- ------------------ --
-
------ -----
---
------ - --------- ------ ------------ --
--------
------ ------
-
-在这个 reducer 函数中，我们接收 state 和 action 参数。如果 action 的类型是 UPDATE_USER_AGE，我们将使用 map() 方法遍历 users 数组，并找到与 action.payload.id 匹配的用户。一旦找到了这个用户，我们将创建一个新的对象，将其年龄更新为 action.payload.age，并返回。否则，我们将返回原始的 user 对象。最后，我们将返回一个新的 state 对象，其中 users 属性已更新为新的 updatedUsers 数组。
现在，我们需要编写一个 action creator 函数来触发上述 reducer 函数。该函数应该接收 id 和 age 作为参数，并返回一个带有 type 和 payload 属性的对象。type 表示这是一个更新用户年龄的操作，而 payload 将包含我们要更新的用户的 id 和 age。
-------- ----------------- ---- -
------ -
----- ------------------
-------- - --- --- -
--
-现在我们可以在组件中调用这个 action creator 函数，并将其传递给 Redux store 的 dispatch 方法。
------ - ----------- - ---- --------------
------ - ------------- - ---- --------------------------
-------- ------ ---- -- -
----- -------- - --------------
----- --------------- - -- -- -
------------------------------- -----
--
------ -
-----
--------------------
------- --------------
------- -------------------------------- ------------
------
--
-在上面的代码中，我们使用 useDispatch() hook 获取 dispatch 函数，并调用 updateUserAge() 函数来更新用户的年龄。当用户点击“Update Age”按钮时，handleUpdateAge() 函数将触发 Redux store 中的 reducer 函数并更新状态。
结论
Redux 是一个非常强大和灵活的状态管理库，可以处理各种不同类型的应用程序状态。在这篇文章中，我们介绍了如何在 Redux 中更新特定数组项中的单个值。我们展示了如何编写一个 reducer 函数来查找并更新匹配项，以及如何
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/29497