Question

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

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

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

希望很清楚。谢谢

Answer 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
}, {})

然后在化简器中更新state.spots：

return {
    ...state,

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

不变的状态更新。更新Redux

1 个答案: