結合する代わりに新しいオブジェクトの要素を上書きして広げる

Question

私のAPIからデータを受け取り、それをreduderにダンプする前にnormalizrに渡しています。 APIから人々のデータを取得するとき、減速機はそれらを人物ストアに追加する必要があります。現在、私のレデューサーは店舗内の既存のデータをすべて上書きしています。

減速：減速機は、一度使用された後

export default function reducer(state={ 
    people: { 
     entities : { 
      people: { 
      0 : { 
       name : '' 
      } 
      } 
     }, 
     result : [0,] 
    } 
    }, action) { 
    switch (action.type) { 
    case "GET_PEOPLE": { 
     const newpPeople = {...state.people, ...action.payload }; 
     console.log(state.people) 
     console.log(action.payload) 
     console.log(newpPeople) 
     return {...state, people : newpPeople}; 
    } 
    default : 
     return state 
    } 
} 

この最初のコンソールログは状態です。第三コンソールログ次に

{ 
    entities: { 
       people : { 
          7 : { id: 7, name: "sally" }, 
          8 : { id: 8, name: "ana" } 
         } 
       }, 
    result : [ 7, 8 ] 
} 

：第2コンソールログが追加される新しい人々のペイロードになります

{ 
    entities: { 
       people : { 
          1 : { id: 1, name: "jim" }, 
          2 : { id: 2, name: "billy" } 
         } 
       }, 
    result : [ 1, 2 ] 
} 

：それは私が店に保存した人の最初のセットを持っています2つの状態を組み合わせる必要がありますか？しかし、それはちょうどサリーとアナとの最後のものを繰り返し、他のすべてを上書きします。

Answer 1

拡散はオブジェクトを再帰的に結合しないためです。

それはあなたが期待どおりに動作この簡単な例を見てみましょう：あなたの状態はあなたがその関数の引数として渡されているデフォルト値から来ているので

const state = { 
    entities: { 
       people : { 
          1 : { id: 1, name: "jim" }, 
          2 : { id: 2, name: "billy" } 
         } 
       }, 
    result : [ 1, 2 ] 
} 

const payload = { 
    entities: { 
       people : { 
          7 : { id: 7, name: "sally" }, 
          8 : { id: 8, name: "ana" } 
         } 
       }, 
    result : [ 7, 8 ] 
} 

const new_state = { 
    entities: { 
       people : { 
          ...state.entities.people,...payload.entities.people 
         } 
       }, 
    result : [...state.result,...payload.result] 
} 

console.log(new_state)