在 React Native Redux 中将状态与忽略重复的对象数组合并

Question

我有一个这样的初始状态：

export const INITIAL_STATE = Immutable({
  payload: []
})

当我分派请求动作时，它会返回一个对象数组，如下所示：

[
  {id: 1, name: 'userA'},
  {id: 2, name: 'userB'},
  {id: 3, name: 'userC'}
]

因此，当我尝试刷新状态时，我会将现有有效负载与从服务器获取的新负载合并：

export const success = (state, { payload }) => {
  const newPayload = state.payload.concat(payload)

  return state.merge({ payload: newPayload })
}

这使我的新状态最终变成这样：

[
  {id: 1, name: 'userA'},
  {id: 2, name: 'userB'},
  {id: 3, name: 'userC'},
  {id: 4, name: 'userD'},
  {id: 5, name: 'userE'},
  {id: 6, name: 'userF'}
]

所以，这部分有效，但是，如果我再次调用我的请求操作，状态将被重复数据填充，如下所示：

[
  {id: 1, name: 'userA'},
  {id: 2, name: 'userB'},
  {id: 3, name: 'userC'},
  {id: 4, name: 'userD'},
  {id: 5, name: 'userE'},
  {id: 6, name: 'userF'},
  {id: 1, name: 'userA'}, // <== duplicated data
  {id: 2, name: 'userB'}, // <== duplicated data
  {id: 3, name: 'userC'}  // <== duplicated data
]

我需要的是，如果我调用请求操作，并且从服务器返回相同的数据（在本例中为 id 1、2 和 3），那么 state.merge 只需将有效负载保持原样或更新如果是这种情况，它们会使用新值，因此如果 id 为 2 的用户将他在服务器中的名称更新为 newUserB，那么我的新状态将是：

[
  {id: 1, name: 'userA'},
  {id: 2, name: 'newUserB'},
  {id: 3, name: 'userC'},
  {id: 4, name: 'userD'},
  {id: 5, name: 'userE'},
  {id: 6, name: 'userF'}
]

而不是这个：

[
  {id: 1, name: 'userA'},
  {id: 2, name: 'userB'},
  {id: 3, name: 'userC'},
  {id: 4, name: 'userD'},
  {id: 5, name: 'userE'},
  {id: 6, name: 'userF'},
  {id: 1, name: 'userA'},
  {id: 2, name: 'newUserB'},
  {id: 3, name: 'userC'}
]

我尝试过使用state.merge({ payload: newPayload }, {deep: true})，但它没有按我预期的方式工作，我也尝试过state.merge({ payload }) 和同样的方法。

有谁知道如何做到这一点？

Answer 1

首先合并两个数组，然后只过滤唯一项。

export const success = (state, { payload }) => {       
   const newArr = state.payload.concat(payload)  
   const idPositions = newArr.map(el => el.id)
   const newPayload = newArr.filter((item, pos, arr) => {
                                return idPositions.indexOf(item.id) == pos;
                              })

   return state.merge({ payload: newPayload })
}