Question

假设我有以下情况：

打开列表组件
调度新的LoadList（），以使用数据列表更新商店
订阅列表状态并显示列表
在列表行上，单击打开“详细信息”组件（显示在列表旁边）
调度新的LoadDetails（）来使用商品更新同一商店列表
订阅详细信息并显示商品信息

可以正常工作。

现在假定以下情况：

打开列表组件
调度新的LoadList（），以使用数据列表更新商店
订阅列表状态并显示列表
在列表行上，单击打开“详细信息”组件（显示在列表旁边）
发送新的LoadDetails（）失败并出现错误
订阅详细信息并仅在详细信息组件上显示“错误”对话框（列表应保持不变）

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

是否存在一些优雅的方式来处理此类错误？

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

Answer 1

如果要在多个位置使用相同的数据对象。我喜欢将它们以唯一ID的状态存储为地图。然后具有另一个存储数据结构，用于存储项目ID的组。这通常是我存储页面对象集的方式。

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

例如：

// 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>

希望这会有所帮助。

使用ngrx处理组件错误

1 个答案: