Ngrx:如何防止元素数组中状态更新后的数据丢失？
Ngrx:如何防止元素数组中状态更新后的数据丢失？
提问于 2019-04-15 22:48:32
我的Angular应用程序显示了一个Item列表，其中每个Item (组件)都有自己的状态，由以下属性组成：
{
name: 'item name',
status: 'OK'
}我使用ngrx存储来维护每个组件的更新状态( OK状态通过Effect来自后端服务，因此我异步检索数据以放入存储中)。
Angular轮询后端服务，如果第n项的状态字段不是OK，则UI必须以不同的颜色显示。
后端服务返回一个如上所示类型的项目数组，并将其放入下面的list中。
因此，这是状态表示：
export interface State {
list: Item[]
}现在，我想在列表的每个条目中存储一个事件的信息：open属性，它不依赖于后端。它是在点击按钮时通过UI设置的。
所以我在某一时刻会有一个这样的状态：
[{
name: 'item 1',
status: 'OK',
open: true
},
{
name: 'item 2',
status: 'OK',
open: false
},
{
name: 'item 3',
status: 'OK'
}
...
{
name: 'item n',
status: null
}]open属性由UI事件设置。其他属性来自后端(通过数组)。
我的问题是，每次我调度一个从后端服务中提取数据的操作时，所有的元素都会被覆盖(我清楚地知道为什么)，并且我有这样的情况：
[{
name: 'item 1',
status: 'OK'
},
{
name: 'item 2',
status: 'OK'
},
{
name: 'item 3',
status: 'OK'
}
...
{
name: 'item n',
status: null
}]解决这个问题的最佳方法是什么？我认为它可以很容易地解决到减速器中，但我仍然不知道如何解决。
我试着：
- 使用不同的存储区
- 使用同一存储区中的另一个数组
但我认为在这两种情况下我都会遇到同步问题
- 我试着把减速器改成这样：
case ItemsActions.STORE_ITEM_LIST:
return {
...state,
list: action.payload
}(更新指定每个字段的每一项)：
case ItemsActions.STORE_ITEM_LIST:
return {
...state,
list: action.payload.map((item, index) => {
action.payload[index].name === item.name ? {
...item,
name: item.name,
status: item.status
} : item
})
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-16 04:09:02
理论上，您必须在有效负载上进行映射，并将当前状态值与传入的值“连接”起来。
这将转换为以下实现：
case ItemsActions.STORE_ITEM_LIST:
return {
...state,
list: action.payload.map((item) => ({
...state.list.find(item2 => item2.name === item.name) || {}, // if the item isn't found just create an empty object
name: item.name,
status: item.status
}))
}为了使这些更新更容易，您可以查看：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55691778
复制相关文章
相似问题