Reactjs 为数组中的嵌套对象编写redux reducer

我是Redux的新手，在为我的情况编写一个工作减速机时遇到了一些困难

我当前的

状态

如下所示

export const userData = {
  userID: '12345678',
  userDetails: {
    firstName: 'Joe',
    surname: 'Bloggs'
  },
  currentGames: [
    {
      gameId: 'G-00000001',
      gameSelections: [
        {
          subgameId: '',
          selection: ''
        }
      ]
    }
  ]
};

function selectWinner (gameId, subgameId, selection) {
  return {
    type: SELECT_WINNER,
    gameId,
    subgameId,
    selection
  }
}

我的行为是这样的

export const userData = {
  userID: '12345678',
  userDetails: {
    firstName: 'Joe',
    surname: 'Bloggs'
  },
  currentGames: [
    {
      gameId: 'G-00000001',
      gameSelections: [
        {
          subgameId: '',
          selection: ''
        }
      ]
    }
  ]
};

function selectWinner (gameId, subgameId, selection) {
  return {
    type: SELECT_WINNER,
    gameId,
    subgameId,
    selection
  }
}

目的是能够添加/更新

gameSelections

数组中的对象

currentGames

数组中也可能有多个对象

---

我听说我应该使用

.map

，但我不确定如何使用。

您使用

.map（）

迭代对象数组的方法是正确的。您的动作创建者似乎还拥有更新减速器状态所需的所有参数

您的减速器可以如下所示：

const userReducer = (state=userData, action) => {
    switch(action.type){
       case SELECT_WINNER:
            return {
                ...state,
                currentGames: [...state.currentGames].map((game) => {
                     if(game.gameId == action.gameId){
                        return {
                           ...game,
                           gameSelections: [...game.gameSelections].map((gameSelection) => {
                               if(gameSelection.subgameId == action.subgameId){
                                  return {
                                      ...gameSelection,
                                      selection: action.selection
                                  }
                               } else {
                                   return gameSelection
                               }
                           })
                        }
                     } else {
                         return game
                     }
                })
            }
       default:
           return state
    }
}

有点凌乱，但会使用深度嵌套状态完成作业。

将项添加到数组：

case'ADD_ITEM':
    return { 
        ...state,
        some_arr: [...state.some_arr, action.payload]
    }

更新数组中的spicific项：

case 'UPDATE_ITEM':
   return { 
       ...state, 
       some_arr: state. some_arr.map(
           (item, index) => index === specific_index
              ? {...item, ...action.payload}
              : content
       )
    }

---

需要对国家进行深度克隆。 有用链接-

}