Redux-saga: как вызвать callback после исполнения множества Ajax запросов из разных саг?

Question

[Worddoc]

Приветствую!

Стек: react, redux, redux-saga.
Проблема: есть прелоадер и куча ajax запросов, которые распределены по разным сагам. 1 запрос контролирует 1 сага. Как можно дождаться выполнения каждого из этих запросов и вызывать callback?
Цель: скрывать прелоадер только после успешного или неуспешного выполнения каждого запроса.

Очень надеюсь на помощь.

Answer 1

[Сергей Сунцев]

Решал аналогичную проблему.
Есть вариант.
Проблема в том, что запросы ассинхронные и мы не можем предугадать, какие из них выполнятся медленней, а какие быстрее.

Вариант для решения данной проблемы - создать пару эшнов, BEGIN_FETCHING и END_FETCHING.
Добавить в стор объект, который бы аккумулировал процесс загрузки, по умолчанию он равен 0.

В начале запроса делаем

yield put({
      type: BEGIN_FETCHING
    })

а в конце

yield put({
      type: END_FETCHING
    })

в редьюссере прописываем, что BEGIN_FETCHING увеличиваает значение, на 1, а END_FETCHING уменьшает
и когда у нас значение объекта стало 0, то убираем прелоадер.

Comments

[Worddoc]

Оригинальное решение, спасибо

Answer 2

[Aleksei Podgaev]

ситуация хитрая, но решаемая. варианта два. если каждая из саг, осуществляющих ajax запрос, запускается по экшену, то она должна по завершении запроса пулять экшен. тогда в главной саге мы просто ждёт завершения всех саг, ожидая соответствующих экшенов. примерно так:

yield all([
  take(REQUEST_1_SUCCESS, REQUEST_1_FAIL),
  take(REQUEST_2_SUCCESS, REQUEST_2_FAIL),
  ...
])

Второй вариант делать то же но с форками, если саги лежат рядом и запускаются напрямую, без экшенов:

yield all([
  fork(request1Saga),
  fork(request2Saga),
  ...
])

Comments

[Worddoc]

Рассматривая первый вариант, не понимаю одного нюанса: пока каждый экшен в all не будет перехвачен, генератор не перейдет к следующему yield?

[Aleksei Podgaev]

Worddoc, да, эффект all это как промис Promise.all - ждёт завершения всех запущеных саг. После all можно поставить экшн, который будет убирать индикатор загрузки. Или я не правильно понял вопрос и нужно не всех ждать, а только некоторых?

[Worddoc]

Вы все верно поняли, только вот обработка экшенов происходит в разных файлах и сагах.

[Worddoc]

Но ваш подход работает

[Aleksei Podgaev]

Worddoc, Ну при первом подходе неважно где происходит обработка. Вы экшенами *_REQUEST запускаете действия, а потом ждёте *_SUCCESS или *_FAIL, сами действия могут происходить где угодно, все саги видят все действия по умолчанию. Хотя мне в последнее время всё меньше нравится такой подход из-за большой связанности саг между собой, которая в результате получается. Но это уже другая проблема.
Как вариант можно чтобы каждый запрос устанавливал свой флаг loaded в стейте, а компонент прелоадера
смотрел, когда все флаги в true встанут. Т.е. перенести проверку загрузки из саги в UI.

[Worddoc]

Aleksei Podgaev, идея с меньшей связанностью хорошая, немного громоздкая реализация, но на все случаи жизни