angular - 使用 ngrx 处理组件错误

问题描述

假设我有以下情况：

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

这按预期工作。

现在假设以下场景：

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

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

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

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

标签： angularerror-handlingreduxngrxngrx-store

如果您要在多个地方使用相同的数据对象。我喜欢通过唯一的 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>

希望这可以帮助。

angular - 使用 ngrx 处理组件错误

问题描述

解决方案

推荐阅读