Redux - обработка нескольких одновременных запросов - PullRequest
Новая
       9

Redux - обработка нескольких одновременных запросов

0 голосов
/ 14 ноября 2018

Практически во всех примерах и документации Redux этот пример показан при работе с асинхронными запросами с логическим значением, обычно isFetching переключается в true, когда выполняется запрос, и в ложь в случае успеха или неудачи.

Когда я загружаю страницу, будет сделано несколько вызовов API из нескольких компонентов, я хотел бы показать индикатор загрузки при выполнении любого запроса к API. Поэтому это может быть не лучшим решением:

  1. Action1 переключает isFetching как true и начинает извлекать из API
  2. Action2 переключает isFetching как true и начинает извлекать из API
  3. Действие1 завершено и поворачивает isFetching на false, даже если Действие2 все еще загружается.

Как бы вы решили такие ситуации?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Надеемся, что в течение пары месяцев вы сможете легко справиться с этим, используя новые концепции fetcher / createResource в сочетании с Suspense.Вы можете увидеть описание этого в параллельном рендеринге Эндрю Кларка в React около минуты 25. Но это будущая функция (Suspense уже доступен, но интегрирован только с разделением кода, но еще не интегрирован с API).звонки).

Итак, на данный момент у вас есть два основных варианта:

  • использовать счетчик, который вы увеличиваете / уменьшаете, когда начинаете / заканчиваете вызовы API (похоже на Ori Droriтолько что опубликовал ответ с этим подходом)
  • использовать несколько логических значений - по одному для каждого задействованного вызова API и показывать индикатор загрузки, если таковые имеются.Единственная причина, по которой вы можете использовать это значение вместо счетчика, - это если вы хотите, чтобы индикатор загрузки был более конкретным (т. Е. Используйте определенные логические значения, чтобы каким-то образом указывать, что загружается)
0 голосов
/ 15 ноября 2018

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

const reducer = (state = { fetchingCounter: 0 }, { type }) => {
    switch(type) {
      FETCHING_PENDING:
        return { fetchingCounter: state.fetchingCounter + 1 };
      FETCHING_DONE:
        return { fetchingCounter: state.fetchingCounter - 1 };
    }    

    return state;
};

Добавление селектора , который преобразует число в логическое значение - 

const isFetching = ({ isFetching }) => !!isFetching
...