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

Question

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

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

当我分派(dispatch)请求操作时，它会返回一个对象数组，如下所示:

[
  {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 })
}