使用 ngrx 处理组件错误

Question

假设我有以下场景：

• 打开列表组件
• 调度新的 LoadList() 以使用数据列表更新存储
• 订阅列表状态并显示列表
• 在列表行上单击打开详细信息组件（显示在列表旁边）
• 派发新的 LoadDetails() 以使用商品更新相同的商店列表
• 订阅详情并显示商品信息

按预期工作。

现在假设以下场景：

• 打开列表组件
• 调度新的 LoadList() 以使用数据列表更新存储
• 订阅列表状态并显示列表
• 在列表行上单击打开详细信息组件（显示在列表旁边）
• 调度新的 LoadDetails() 失败并出现一些错误
• 订阅详细信息并仅在详细信息组件上显示错误对话框（列表应保持不变）

这只是一个基本示例。如果我同时有多个可见的组件，从同一个商店获取数据怎么办...... 前任。一些注册表存储包含项目列表，其中一个组件需要一些项目，而另一个组件则很少 + 可能只是更新项目失败，这又是它自己的组件同时可见...

有什么优雅的方式来处理这类错误吗？

P.S.：我可以通过一些可以为每个项目和操作保存错误的 Map 来实现这一点，但这听起来不对 + 样板太多...

Answer 1

如果您要在多个地方使用相同的数据对象。我喜欢通过唯一的 id 作为地图将它们存储在状态中。然后有另一个存储数据结构来存储项目 ID 的组。这通常是我存储分页对象集的方式。

当您从 API/DB 等取回数据时，将其存储在 Store 中的两个位置。

例如：

// Store
personPages$: {
    1: {
        meta: {pageSize: 3, totalItems: 6},
        results: [1, 2, 4]
    },
    2: {
        meta: {pageSize: 3, totalItems: 6},
        results: [7, 3, 8]
    }
}
...
personEntities$: {
    1: {
        name: Han Solo, age: 37, weapon: blaster 
    },
    2: { 
       name: Luke Skywalker, age: 22, weapon: lightsaber
    } 
    ...
}

然后在您要显示列表的模板中，您只需循环结果数组并从实体映射中提取 obj。

<li *ngFor="let id of (personPages$ | async)[1]?.results">
    {{(personEntities$ | async)[id]?.name }}
</li>

希望这会有所帮助。