アクションで減速機の状態を更新するには？

Question

アクションペイロードをレデューサーに渡していて、レデューサーが適切なdataを更新して状態全体を返すようにしたいとします。

リデューサー：私はaction.payloadに応じて1つにstate.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 
    } 
} 

？

私が試した：

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

をしかし、それはデータを追加し続けます。スプレッドオペレータ...DATA1を使用し、それをdata[]にプッシュする前に、データをクリアします。

Answer 1

あなたはこのように、データプロパティの内容を置き換えることができます。

return {...state, data: DATA1} 

stateはすでにdata性質を持っていますが、それは後に発生したデータプロパティによって上書きされます。

Answer 2

ペイロードではなく、アクションタイプをオンにする必要があります。あなたのケースでは、アクションタイプは、「ケース1」、「ケース2」になるなど

あなたはstateを構造化代入し、新しいDATA1でdata要素を交換することによって、あなたのdata要素を置き換えることができます。

あなたの減速は、あなたが声明を切り替えるaction.typeを渡す必要がありますし、行動には「CASE1」ペイロードはありませんので、どのようにあなたには、いくつかの状態を返すことができます

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 
    } 
}