如何向存储阵列添加其他项目，并且在重置时仍能将阵列设置为空

Question

我已经建立了一个带有玩家数组的Store.js。我想在选择玩家时将其添加到数组中，但如果清除数组，仍然可以将数组设置为空。

这是我的Store.js 中的一些代码

const initialState = {
playerCollection: [],
}

const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE_PLAYER_COLLECTION':
return { ...state, playerCollection: action.value };
default:
return state;
}
}

这是我的Players.js 中的一些代码

for(let i=0; i<players.length; i++){
let player = players[i];

if(player.position === state.posAbbr && player.status === 'ACT'){
let newPlayer = createNewPlayer(roster, player);
dispatch({ type: 'UPDATE_PLAYER_COLLECTION', value: [...state.playerCollection, newPlayer] });
return;
}
}

我的调度行只是在playerCollection数组中添加一个播放器。我也想，就像我上面说的，如果我清除它，能够将数组设置为[]。

Answer 1

定义一个clear playerCollection操作，并在reducer中将该操作的数组设置为空：

const reducer = (state, action) => {
switch (action.type) {
case 'UPDATE_PLAYER_COLLECTION':
return { ...state, playerCollection: action.value };
case 'CLEAR_PLAYERS':
return {...state,playerCollection: []};
case "ADD_PLAYER" :
return {...state,playerCollection : [...state.playerCollection,action.value]}
default:
return state;
}
}