不可变状态更新。在 Redux 中更新对象数组答案

【问题标题】：Immutable state update. Update an array of objects in Redux不可变状态更新。在 Redux 中更新对象数组
【发布时间】：2019-11-12 04:04:41
【问题描述】：

我有一个数组类型的状态，最初看起来像这样：

const initialState = {
    spots: []
}

在第一次更新时，它会被对象填充，看起来像这样：

state.spots = [
    { id: '1', available: 1, path: 'xxx' },
    { id: '2', available: 1, path: 'xxz' },
    { id: '3', available: 1, path: 'xxy' },
    { id: '4', available: 1, path: 'bxy' },
    { id: '5', available: 1, path: 'vxy' },
    { id: '6', available: 1, path: 'fxy' }
]

在所有后续更新中，我们得到了所有带有“id”和“available”键的位置，但没有路径。

所以载荷看起来像这样：

payload = [
    { id: '1', available: 1 },
    { id: '2', available: 0 },
    { id: '3', available: 0 },
    { id: '4', available: 1 },
    { id: '5', available: 0 },
    { id: '6', available: 1 }
]

我正在尝试找出不可变的 ES6 模式来更新状态，但我似乎无法做到正确。

编辑：到目前为止我发现的最佳解决方案如下：

state.spots = state.spots.map( (spot, key) => {    
  let new_spot = payload.find(o => o.id === spot.id);
  return { ...spot, ...new_spot }
})

使用新有效负载正确更新数组“点”的所有对象的最有效方法是什么。

希望很清楚。谢谢

【问题讨论】：

如果有效负载和状态是以 id 作为键，其余作为值的对象，似乎会更容易。这是一个选择吗？

标签： redux immutability spread-syntax

【解决方案1】：

CodeSandbox

您可以使用每个点的 id 作为键创建有效负载的哈希映射：

const payload = [
    { id: '1', available: 1 },
    { id: '2', available: 0 },
    { id: '3', available: 0 },
    { id: '4', available: 1 },
    { id: '5', available: 0 },
    { id: '6', available: 1 }
]

// You can adjust the map to how you like.

const map = payload.reduce((acc, entry) => {
    acc[entry.id] = entry
    return acc
}, {})

然后在你的 reducer 中更新 state.spots：

return {
    ...state,

    spots: state.spots.map(e => {
        if (map[e.id]) return { ...e, ...map[e.id] };
        return e;
    })
};

【讨论】：