组件异步内容完全加载时响应旋转器

Question

我有一个React应用程序，其结构如下：

我有多页- "PageA"，"PageB“。每个页面都将呈现一个主组件- "PageAComponent“、"PageBComponent”。在这些主要组件中，我有多个小组件，它们将使用Redux触发异步操作。每个组件都会将数据存储到Redux-Store (或state)中。我希望能够在整个页面上显示一个加载自旋器，但我不知道如何检测何时完成所有小组件异步调用，以便知道何时隐藏加载自旋器。伙计们有什么想法吗？

Answer 1

为旋转状态保留一个通用的减速器，其中包含一个名为pendingRequests的计数器变量

// Spinner state
{
    pendingRequests: 0, 
}

无论何时开始加载数据，都要增加计数器。

当数据加载完成时，无论是成功还是失败，都要减少计数器。

只有当计数器大于0时才显示旋转器。