Реакция: asyn c изменение свойства глобального состояния

Question

Каков наилучший способ для сценария ниже?

1. В приложении есть компонент Loader. js, который отображается, когда свойство в глобальном состоянии (избыточное) имеет свойство, например, loaderOn, имеет значение true
2. Существует несколько вызовов API asyn c (в разных компонентах приложения), каждый из которых отправляет действие, показывающее загрузчик (loaderOn: true)
3. Проблема: как скрыть Loader после завершения LAST-запроса?

a) Вышеописанный сценарий не совсем хорош - флаг true / false становится ложным после завершения первого запроса

b ) Я пытался с флагом счетчика - +1 для каждого запрошенного запуска и затем -1 для каждого, когда завершено - Загрузчик скрывается в 0. Но запросы асин c (и так же установка состояния из разных мест?), Так что тоже не работает (установка флага счетчика зависит от прежнего состояния, поэтому параллельные изменения состояния дают неверное конечное значение)

Answer 1

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

Таким образом, в initialState в Redux вы можете иметь:

{
  ...
  usersLoading: false,
  productsLoading: false,
  companiesLoading: false,
}

Затем вы устанавливаете его на true / false в зависимости от загруженного состояния всех данных.

Наконец, у вас может быть селектор, который оценивает логический OR всех флагов загрузки, например так:

state.usersLoading || state.productsLoading || state.companiesLoading

А в вашем App компоненте соедините значение этого селектора с вашей пропеллером, скажем, loading, и визуализируйте компонент Loader на основе этого:

{loading && <Loader />}