带有“嵌套” 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通过连接不同的实体，现在我可以选择必要的数据。

问题

我必须进行 3个不同的API调用来获取所有数据，并且要在两者之间显示加载微调器。因为存在3种不同的副作用，所以我不知道如何在状态下更新{ loading: boolean, loaded: boolean }

loaded仅应在true和users均成功加载的情况下为products。

因为我想在应用程序的其他部分重复使用LoadUsers和LoadProducts，所以我不能仅仅在loaded上设置true的评论中的{{1}}效果完成。

Answer 1

我猜您在@Effects内触发了您的请求。如果您有n个请求，则可能需要使用forkJoin，combineLatest或zip之类的一些组合运算符来触发它们。

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

获得所有答复后，您可以提出设置xCompleteAction的{​​{1}}。

PS。 良好的思维模式是：加载程序状态与实际的api调用无关，而与效果有关，而效果又可以通过发送单个或多个api调用对单个动作做出反应。

Answer 2

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

因此，在分派请求之前，您可以分派带有有效负载1的ONGOING_REQUESTS_INCREMENT，而当请求完成/出错时，您可以分派ONGOING_REQUESTS_DECREMENT。如果需要，您甚至可以在其中添加一些“作用域”。

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