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

Posted 2023-02-22

【中文标题】不可变状态更新。在 Redux 中更新对象数组

【英文标题】：Immutable state update. Update an array of objects in 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 作为键，其余作为值的对象，似乎会更容易。这是一个选择吗？

【参考方案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;
    )
;