Реагировать на счетчик при полной загрузке асинхронного содержимого компонентов

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

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


reactjs asynchronous spinner saga
person Irimie Andrei    schedule 08.10.2018    source источник
comment
Если вы используете saga, я бы прислушивался к действиям загрузки (или запускал одно и то же действие загрузки при каждой загрузке), запускал другое действие с загруженным контентом и сохранял в хранилище redux, если происходит какая-либо загрузка. Вы можете передать ключ для каждого экземпляра загрузки и очистить ключ после получения данных.   -  person FabioCosta    schedule 08.10.2018

Ответы (1)


arrow_upward
2
arrow_downward

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

// Spinner state
{
    pendingRequests: 0, 
}

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

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

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

person vahissan    schedule 08.10.2018