如何将其他项目添加到存储数组并且在重置时仍然能够将数组设置为空？

Question

我已经设置了一个带有 player 数组的 Store.js。 我想将玩家添加到数组中，因为我是 select 他们，但如果我清除数组，仍然可以将数组设置为空。

这是我的 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

定义一个明确的 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;
 }
}