我正在使用redux来管理我的状态,我在reducer中的初始状态包含到个数组!第一个(games
)是我想修改的,第二个(InitialGames
)是我不想修改的初始状态!
问题是我只在第一个数组上做了更改!但是当我在逻辑后控制我的状态时!我看到两个数组都被更改了???这很混乱!
我将要讨论的案例是PLAYER_DEAD
我的减速器
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;
};
1条答案
按热度按时间x3naxklr1#
之所以会发生这种情况,是因为您将相同的
action.payload.game
对象传递给了两个数组:当你在
PLAYER_DEAD
的情况下访问.teams
数组时,你访问的是games
和InitialGames
共享的内存中的同一个数组,同样的情况也适用于该数组中的任何内容,包括.teams
数组对象中的.players
数组。因为你使用.splice()
以一种不可变的方式更新数组,您最终会直接修改状态,从而修改games
和InitialGames
引用的同一个.players
数组。您需要确保不会使用
.splice()
之类的方法在适当的位置修改状态。在上面的例子中,我们Map了数组,当indx与要更新的项匹配时更新项。当更新
players
数组时,我们使用.slice()
从数组中删除第一个项。编写不可变的代码并不总是那么容易,这就是为什么redux工具包内置了immer支持,当你使用
createSlice()
API这样的API时,它允许你编写代码,就像你一直在改变你的状态一样。