合并数组中项目的值和 redux 中的 object

Question

所以我正在使用 redux 和 reactjs，虽然问题不相关：

我有这个collection

const items = [
  {id: 0, name: 'one'},
  {id: 1, name: 'two'},
  {id: 2, name: 'three'}
]

const itemsWithTheFlag = [
  {id: 0, flag: false},
  {id: 1, flag: true},
  {id: 2, flag: false},
]

那么我的初始状态是：

{
  items: items
}

现在我想知道如何在 items 数组中执行查找和更新，

我的一个功能是模拟 async 请求并从 itemsWithTheFlag

接收项目

export function fetch(id) {
  const desiredItem = find(itemsWithTheFlag, (item) => (item.id === id))
  return (dispatch, getState) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        dispatch(receiveItem(desiredItem))
        resolve()
      }, 100)
    })
  }
}

现在我需要帮助更新状态，更新后的 merged 值，我从 fetch 和初始状态 items

收到

[RECEIVE_ITEM]: (state, action) => {
  return Object.assign({}, state, {
    // how ??
  })
}

我当然想保持不变性，使用lodash也可以

Answer 1

您需要重新创建整个数组并使用相应的 id 修补项目。

return Object.assign({}, state, {
    items: state.items.map(
       item => (
         item.id === action.desiredItem.id
         ? Object.assign({}, item, desiredItem)
         : item)
    )
  })

Answer 2

您需要 return 一个新数组，仅换出该项目。这种方式的好处是不会遍历所有 state.items，这在大型数组上性能更高（但本例中的解决方案确实使用了 lodash）

const index = _.findIndex(state.items, { id: action.newItem.id });
return {
  ...state,
  items: [
    ...state.items.slice(0, index),
    { ...state.items[index], ...action.newItem },
    ...state.items.slice(index + 1)
  ]
};

合并数组中项目的值和 redux 中的 object

Merging values from an item in an array and an object in redux

javascript

array-merge

lodash

reactjs

redux