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

Question

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

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

Answer 1

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

// Spinner state
{
    pendingRequests: 0, 
}

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

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

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