具有 "nested" API 请求的 NGRX 加载指示器

Question

我正在从我的 API 加载产品评论并将其存储在状态中。一篇评论看起来像这样：

// Review
{
    _id: 'reviewId',
    productId: 'productId',
    creatorId: 'userId',
    writerId: 'userId',
    content: 'review content',
    rating: 4.5,
}

但我还需要有关 product、creator 和 writer 的信息。因此，我有像 LoadManyByIds（针对用户和产品）这样的操作。

加载所有内容后，状态可能如下所示：

// State
{
    reviewEntities: {
        reviewId1: {
            _id: 'reviewId1',
            productId: 'productId',
            creatorId: 'userId',
            writerId: 'userId',
            content: 'review content',
            rating: 4.5,
        },
        reviewId2: {},
        reviewId3: {},
        //...
    },
    userEntities: {
        userId1: {},
        userId2: {},
        //...
    },
    productEntities: {
        productId1: {},
        productId2: {},
        //...
    }
}

通过 ID 连接不同的实体，我现在能够 select 必要的数据。

问题

我必须执行 3 次不同的 API 调用 来获取所有数据，想在两者之间显示一个加载微调器 .因为有 3 种不同的副作用，所以我无法弄清楚如何在状态

中更新 { loading: boolean, loaded: boolean }

如果 users 和 products 均已成功加载，则

loaded 仅应为 true。

因为我想在应用程序的其他部分重复使用 LoadUsers 和 LoadProducts 我不能只设置 true 上的评论 loaded那些副作用结束了。

Answer 1

我猜你在 @Effects 内发出了你的请求。如果您有 n 个请求，您可能希望使用一些组合运算符来触发它们，例如：forkJoin、combineLatest 或 zip.

forkJoin 可能是一个好的开始： https://www.learnrxjs.io/operators/combination/forkjoin.html

获得所有回复后，您可以提出 xCompleteAction 设置 loading: false。

PS。良好的心智模型是加载程序状态与实际的 api 调用无关，而是与效果相关，而效果又可以通过发送单个或多个 api 调用对单个操作做出反应。

Answer 2

您可以将加载状态视为当前未完成的请求数。

因此，在发送请求之前，您可以使用负载 1 发送 ONGOING_REQUESTS_INCREMENT，当请求完成/出错时，您可以发送 ONGOING_REQUESTS_DECREMENT。如果需要，您甚至可以添加一些 "scope"。

我处理类似功能的方式是通过 Angular 拦截器调度 increment/decrement 事件。我对全局加载状态完全满意。

具有 "nested" API 请求的 NGRX 加载指示器

NGRX Loading Indicator with "nested" API Requests

api

asynchronous

redux

ngrx

effects