angular - 使用 ngrx 处理组件错误

Question

假设我有以下情况:

打开列表组件

调度新的 LoadList()，用数据列表更新存储

订阅列表状态并显示列表

在列表行上单击打开详细信息组件(显示在列表旁边)

调度新的 LoadDetails() 以使用项目

更新相同的商店列表

订阅详情并显示商品信息

这按预期工作。

现在假设以下场景:

打开列表组件

调度新的 LoadList()，用数据列表更新存储

订阅列表状态并显示列表

在列表行上单击打开详细信息组件(显示在列表旁边)

调度新的 LoadDetails() 失败并出现一些错误

订阅详细信息并仅在详细信息组件上显示错误对话框(列表应保持不变)

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

有没有一些优雅的方法来处理这种错误？

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

Answer 1

如果您要在多个地方使用相同的数据对象。我喜欢通过唯一的 id 作为 map 将它们存储在状态中。然后有另一个存储数据结构来存储项目 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>

希望这可以帮助。