如何用動作更新減速器狀態？

Question

我正在將操作有效負載傳遞給減速器，並希望減速器更新適當的data並返回整個狀態。

減速器：

const initialState = {
  fname: 'FNAME',  
  lname: 'LNAME',
  data: []
}

const DATA1 = [
    {id:1, name:'D1a'},
    {id:2, name:'D1b'}
]
const DATA2 = [
    {id:1, name:'D2a'},
    {id:2, name:'D2b'}
]

export default function peopleReducer(state=initialState, action){

    console.log(action.payload);
    switch(action.payload){
      case "case1":
        return {...state, DATA1};  // how do I code this?
      case "case2":
        return  {...state, DATA2};
      default:
        return state
  }
}

如何根據action.payload將state.data設置為一個？

我試過了：

  case "case1":
    return { 
      ...state,
      data: [...state.data, ...DATA1]
     };

但是它一直在追加數據。 我希望在使用擴展運算符...DATA1並將其推送到data[]之前清除data[] 。

Answer 1

您可以像這樣替換data屬性的內容：

return {...state, data: DATA1}

state已經具有data屬性，但是稍后將被數據屬性覆蓋。

Answer 2

您應該打開動作類型，而不是有效負載。 在您的情況下，操作類型將為“情況1”，“情況2”等。

您可以更換您的data通過解構元素state和更換data與新元素DATA1 。

您的減速器看起來像

export default function peopleReducer(state=initialState, action){

    console.log(action.payload);
    switch(action.type){
      case "case1":
        return {...state, data:DATA1};  
      case "case2":
        return  {...state, data:DATA2};
      default:
        return state
  }
}