完全加载组件异步内容时的反应微调器

Question

我有一个 React 应用程序

，它的结构如下：我有多个页面 - "页面 A"、"页面 B"。这些页面中的每一个都将呈现一个主要组件 - "PageAComponent"，"PageBComponent"。在这些主要组件中，我有多个小组件，它们将使用 Redux Saga 触发异步操作。这些组件中的每一个都将数据存储到 Redux-Store(或状态(中。 我希望能够在整个页面上显示加载微调器，但我不确定如何检测所有小组件异步调用何时完成，以便知道何时隐藏加载微调器。伙计们有什么想法吗？

Answer 1

为微调器状态保留一个通用的化简器，其中包含一个名为pendingRequests的计数器变量：

// Spinner state
{
pendingRequests: 0, 
}

每当开始加载数据时，请增加计数器。

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

仅当计数器大于 0 时才显示微调器。