在新对象中传播运算符覆盖元素，而不是合并

Question

我正在从我的API中获取数据，并在将其转储到redux之前将其通过normalizr传递。当我从API获取人员数据时，reducer应该将其附加到人员存储中。现在，我的reducer正在覆盖存储中的所有现有数据。

减速器：

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

该第一个控制台日志是reducer一次使用后的状态。它具有最初已保存到商店的一组人员：

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

第二个控制台日志将是要添加的新人员的有效负载：

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

那么第三个控制台日志应该将这两个状态结合起来吗？但是它只是用sally和ana重复最后一个，并覆盖其他所有内容。

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)