使用给定的用户 ID 上下文更新对象道具 api 做出反应

Question

我正在尝试使用上下文更新用户数据 API - 我让它工作了，所以它根据他们的用户 ID 单独执行 - 所以在这个意义上

如果我想更新用户的头像我可以

case 'UPDATE_USER_AVATAR':
      const { userId, avatar } = action.user

      const user = {
        ...state.users.find((c: User) => c.userId === userId),
        avatar,
      }

      return {
        ...state,
        users: state.users.map((c: User) => {
          return c.userId !== userId ? c : user
        }),
      }

我这样更新用户名

case 'UPDATE_USER_NAME':
      const { user_id, name } = action.user

      const userName = {
        ...state.users.find((c: User) => c.userName === user_id),
        name,
      }

      return {
        ...state,
        users: state.users.map((c: User) => {
          return c.userName !== user_id ? c : userName
        }),
      }

这对我有用，但现在我无法添加更多内容 - 例如，我想添加或更改用户的 phone 号码或其他内容 - 我必须创建另一个新的reducer - 有没有一种方法可以在一个 reducer 中完成所有这些工作，而不是为不同的情况创建多个？

Answer 1

您只能编写一个函数来更新用户信息，如下所示：

case 'UPDATE_USER':
  const { user_id, ...userInfor } = action.user

  return {
    ...state,
    users: state.users.map((c: User) => {
      return c.userName !== user_id ? c : {...c, ...userInfor}
    }),
  }

Answer 2

像这样解构你的action.user。

const { user_id, ...other } = action.user

然后像这样创建一个用户对象。

const user = {
  ...state.users.find((c: User) => c.userName === user_id),
  ...other 
};

最后照常传递给map。

return {
  ...state,
  users: state.users.map((c: User) => {
    return c.userName !== user_id ? c : user // Pass user object to here.
  }),
}

现在您可以根据需要传递有关用户的任何信息。

如果您需要有关 JavaScript 解构的更多信息，请参阅此 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

如果您需要进一步的支持，请告诉我。

使用给定的用户 ID 上下文更新对象道具 api 做出反应

updating object props with given users id context api react

reactjs

redux

reducers

react-context