reactjs - 如何使用 redux 更新状态中的 1 个项目？

Question

我有一个 reducer 并尝试更新状态数组中的 1 项。它看起来像这样:

const players = (state = [{name:'John',nrGames:0,nrWins:0},{name:'Ed',nrGames:0,nrWins:0},{name:'Mark',nrGames:0,nrWins:0}], action) => {
    switch (action.type) {

        case 'ADD_PLAYER':
            return [...state,{name:action.name}]

        case 'ADD_WIN':
            return [...state, action.name == 'bla' ? {nrWins:10} : {} ]

        default:
            return state;
    }
};

export default players;

我试图弄清楚如何更改某个名称的 nrWins 属性。那么，当使用 name='John' 调度 ADD_WIN 时，如何仅更新 John 对象并将 nrWins 属性设置为 1，而不是状态中的其他对象？

Answer 1

您需要对玩家进行.map，当您找到操作所描述的玩家时，将创建一名具有更新获胜次数的新玩家。为了便于阅读，我创建了一个名为 incWinForPlayer 的函数。

const incWinForPlayer = (name) => (player) => {
  return player.name === name
    ? {...player, nrWins: player.nrWins + 1}
    : player
};

const players = (state, action) => {
  switch (action.type) {
    case 'ADD_PLAYER':
      return [...state, {name: action.name}]
    case 'ADD_WIN':
      return state.map(incWinForPlayer(action.name));
    default:
      return state;
  }
};

export default players;