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

Question

我的初始状态是这样的：

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

当我发送请求操作时，它 returns 一个对象数组，如下所示：

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

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

Merge state with array of objects ignoring duplicates in React Native Redux

merge

react-native

react-redux