Реакция вращения, когда компоненты полностью загружены.

Question

У меня есть приложение React, которое структурировано следующим образом:

У меня есть несколько страниц - «PageA», «PageB».Каждая из этих страниц будет отображать основной компонент - «PageAComponent», «PageBComponent».В этих основных компонентах у меня есть несколько небольших компонентов, которые будут запускать асинхронные операции с использованием Redux Saga.Каждый из этих компонентов будет хранить данные в Redux-Store (или состоянии).Я хочу иметь возможность отображать загрузочный спиннер по всей странице, но я не уверен, как определить, когда завершены асинхронные вызовы всех мелких компонентов, чтобы узнать, когда скрыть загрузочный спиннер.Есть идеи, ребята?

Answer 1

Сохраните общий редуктор для состояния счетчика, который содержит переменную счетчика с именем pendingRequests:

// Spinner state
{
    pendingRequests: 0, 
}

Когда вы начинаете загружать данные, увеличивайте счетчик.

Когда загрузка данныхсделано, будь то успех или неудача, уменьшите счетчик.

Показывать счетчик только тогда, когда счетчик больше 0.