在 Redux 中更新特定数组项中的单个值-JavaScript中文网-JavaScript教程资源分享门户

引言

Redux 是一个流行的 JavaScript 应用程序状态管理库。在 Redux 中，我们可以使用 reducer 函数来管理应用程序的状态。当我们的应用程序有一个数组类型的状态，并且需要更新某个特定项中的值时，这可能会变得复杂。这篇文章将介绍如何在 Redux 状态中更新特定数组项中的单个值。

问题描述

假设我们有以下 Redux 状态：

{
  users: [
    { id: 1, name: "John", age: 20 },
    { id: 2, name: "Jane", age: 25 },
    { id: 3, name: "Bob", age: 30 }
  ]
}

现在我们想要更新 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。

function updateUserAge(id, age) {
  return {
    type: "UPDATE_USER_AGE",
    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