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

Question

我有一个按以下方式构建的 React 应用程序：

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

Answer 1

为旋转器状态保留一个通用的 reducer，其中包含一个名为 pendingRequests:

的计数器变量

// Spinner state
{
    pendingRequests: 0, 
}

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

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

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