¡Estoy usando redux para administrar mi estado, mi estado inicial en el reductor contiene arreglos! el primero ( games ) es el que quiero modificar, el segundo ( InitialGames ) es el inicial que no quiero que se modifique.
¡el problema es que solo hago cambios en la primera matriz! ¡pero cuando consuelo mi estado después de la lógica! veo que ambas matrices se cambiaron ??? que es confuso!
El caso en el que estoy entrando es PLAYER_DEAD
Mi reductor
import { ADD_GAME, PLAYER_DEAD, PUT_INFOS, RESET_GAME } from "./actions"; const initialState = { games: [], InitialGames: [], }; export default (state = initialState, action) => { switch (action.type) { case RESET_GAME: state.games[action.payload.gameIndex] = state.InitialGames[action.payload.gameIndex]; console.log(state); return state; case ADD_GAME: return { games: [...state.games, action.payload.game], InitialGames: [...state.games, action.payload.game], }; case PUT_INFOS: return { gameInfos: action.gameInfos, }; case PLAYER_DEAD: let newGames = state.games; let newInitialGames = state.InitialGames; console.log("Before Changings", newGames, newInitialGames); let newTeam = newGames[action.payload.indexGame].teams[ action.payload.index ].players.splice(0, 1); console.log( "After changings", newGames, newInitialGames ); return {games:newGames,InitialGames:newInitialGames}; } return state; };Esto estaría ocurriendo porque está pasando el mismo objeto action.payload.game a ambas matrices aquí:
return { games: [...state.games, action.payload.game], // same objects ---------^------v InitialGames: [...state.games, action.payload.game], } Cuando accede a la matriz .teams en su caso PLAYER_DEAD , está accediendo a la misma matriz en la memoria compartida por ambos games e InitialGames , lo mismo ocurre con cualquier cosa dentro de esa matriz, incluida la matriz .players dentro de los objetos de su matriz .teams . Debido a que está actualizando su matriz en su lugar de una manera no inmutable usando .splice() , termina modificando su estado directamente y, por lo tanto, modificando la misma matriz .players a la que hacen referencia tanto los games como InitialGames .
Debe asegurarse de no modificar su estado utilizando métodos como .splice() . Para su caso particular, haría algo así:
const newGames = state.games.map((game, i) => i === action.payload.indexGame ? game.teams.map((team, j) => j === action.payload.index ? {...team, players: team.players.slice(1)} // note slice, not splice : team ) : game ); Arriba, mapeamos sus matrices, actualizando los elementos cuando el inndx coincide con el elemento para actualizar. Al actualizar la matriz de players , usamos .slice() para eliminar el primer elemento de la matriz.
Escribir código inmutable no siempre es fácil, es por eso que el kit de herramientas redux tiene soporte incorporado para immer cuando usa una API como createSlice() API que le permitirá escribir código como lo ha estado haciendo mutando su estado. Vea aquí para más información.