Обновление вложенного состояния в React Redux, что не так с синтаксисом? Есть ли лучший способ написания этого редуктора?

Question

Я пытаюсь обновить это вложенное состояние, называемое лобби. Вот как выглядит «лобби»:

this.props = {
    lobby: [ 
        {
            id: 1,
            game: "Basketball",
            teams: 2,
            description: "Come!",
            filled_slots: 4,
            max_slots: 6,
            location_name: "cherry park",
            zipcode: "96024",
            active: true,
            eventDate: new Date(2018, 8, 20, 18),
            current_players_id: {
                 team1: [
                    1
                 ],
                 team2: [
                    2,
                    3,
                    4
                 ]
            }
        },
    {...},
    {...},
    ]
}

Это функция обновления, которую я до сих пор писал для команд обновления, у меня возникли некоторые проблемы с синтаксисом в операторе возврата, потому что я использую переданные параметры. Любая помощь или предложения высоко ценится!

// Parameters passed to the reducer via action
gameId = 1
newTeams = { // passing newTeams to remove player from teams before adding
         team1: [
            1
         ],
         team2: [
            3,
            4
            ]
        }
 team = 'team2'
 userId = 2


// reducer
export const lobbyListReducer = ( state = intitialState, action = {}) => {
switch(action.type) {
    case JOIN_TEAM: 
        const { gameId, newTeams, team, userId } = action.payload;
        // console.log(action.payload)
        const lobbyIndex = () => {
            return state.lobby.findIndex(lobby => {
                return lobby.id === gameId
            })
        }
        // I have syntax errors below
        return {
            ...state, 
            lobby: [
                ...state.lobby, 
                state.lobby[ lobbyIndex() ]: {
                    ...state.lobby[ lobbyIndex() ],
                    state.lobby[ lobbyIndex() ].current_players_id: { 
                            ...newTeams, 
                            [team]: [ 
                                ...state.lobby[ lobbyIndex() ].current_players_id[team], 
                                userId
                            ] 
                        }
                    }
                }
            ]
        }
    default:
        return state;
}
}

Как правильно передать параметры при использовании их для ссылки на вложенные уровни в массиве объектов?

Кроме того, является ли эта структура данных лучшим способом обработки моих данных в состоянии?

Answer 1

лобби - это массив, вы не можете использовать state.lobby[ lobbyIndex() ]: { для изменения элемента из массива. Также вам не нужно менять все в одном утверждении. Делай в несколько шагов. Сначала создайте самый внутренний массив, затем следующий верхний, затем следующий, пока не получите окончательный результат.

как

const lobby = state.lobby[lobbyIndex()]
const newTeam = lobby.current_players_id[team].slice()
newTeam.push(userId)
const newLobby = {...lobby, ...{current_players_id: {...lobby.current_players_id, ...{[team]: newTeam}}}}
return {...state, lobby: newLobby}