如何使用Redux更新状态中的1个项目？

Question

我有一个 reducer，想要在状态数组中更新一项。它看起来像这样：

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而不是状态中的其他对象？

- bier hier

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;

- arpl

Answer 2

“推荐”的方法是将旧数组切片到新项目，与修改后的数组连接，再将其与数组的其余部分连接。

确保您的操作返回整个新项目以及要修改的索引。

例如：

case 'ADD_WIN':
  return [
    ...array.slice(0, action.index),
    action.item,
    ...array.slice(action.index)
  ];

编辑1：源代码https://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html#inserting-and-removing-items-in-arrays

- weisk