В чем смысл Redux Promise и Redux Promise Middleware?

Я искал высоко и низко, но не могу найти четкий ответ.

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

Можете ли вы помочь мне исправить беспорядок?

Cotradictory части головоломки, дающие мне головную боль:

  1. В одном из учебных пособий YT говорится, что изначально метод отправки Redux не поддерживает обещания, возвращаемые создателями действий, - следовательно, необходима библиотека Redux Promise (я знаю, что проект, вероятно, сейчас мертв, и продолжение - Redux Promise Middleware).

  2. Дэн говорит: "В чем разница между" избыточным количеством "и" избыточным обещанием "? " Я могу использовать обещания даже без промежуточного программного обеспечения - просто управляйте ими в создателе действий.

  3. В других ответах я нашел примеры использования thunks, когда создатель действия возвращал... обещание (позже это было обработано в вызывающей / диспетчерской (myActionCreator (params).then (...) / ) Таким образом, обещание может быть возвращено СПАСИБО БЕЗ какой-нибудь излишне-обещающей библиотеки..?

  4. В разделе "В чем разница между redux-thunk и redux-обещанием? ", Принятый ответ заявляет, что Redux Thunk возвращает функции, тогда как Redux Promise возвращает обещания... какого черта?

В заключение: какой смысл использовать Redux Promise или Redux Promise Middleware? Почему Redux сам по себе не поддерживает обещания?

Обновить:

Я только что понял, что в пункте 3 выше я упустил из виду then() быть привязанным к dispatch и не входит в dispatch() арг.

Источник

2 ответа

Решение

Связанные ответы верны, но я постараюсь объяснить дальше.

Базовое хранилище Redux будет принимать только действия простого объекта:

store.dispatch({type : "ADD_TODO", text : "Buy milk"});

Если вы попытаетесь передать что-либо, кроме действия простого объекта, хранилище выдаст ошибку:

store.dispatch(() => {});
// Error: "Actions must be plain objects. Use custom middleware for async actions."

Промежуточное ПО образует конвейер вокруг store.dispatch() и каждое промежуточное ПО может делать все, что захочет, с любым значением, которое было передано dispatch измените его, зарегистрируйте, отложите или отправьте что-нибудь еще вместо него. Это означает, что промежуточное ПО может "учить" dispatch() как принять что-то, что не является простым объектом действия, перехватывая значение и делая что-то еще вместо этого.

Так, redux-thunk "Учит" dispatch как принимать функции, перехватывая функцию и вызывая ее вместо передачи ее редукторам. redux-promise "Учит" dispatch как принимать обещания, перехватывая обещание и отправляя действия, когда обещание разрешается или отклоняется.

Обычно, dispatch возвращает объект действия, который был передан. Потому что промежуточное ПО оборачивается dispatch, они также могут изменить то, что значение возвращается. redux-thunk запустит функцию thunk и вернет все, что возвращает функция thunk. Это позволяет вам делать полезные вещи, такие как возвращение обещания от thunk и цепное поведение оттуда:

dispatch(someThunkReturningAPromise())
    .then(() => {
        // Do more stuff here
    });

Для получения дополнительной информации по этой теме, смотрите раздел часто задаваемых вопросов по Redux о побочных эффектах и статьи в разделе Redux Side Effects моего списка ссылок React/Redux.

Источник

Когда вы вызываете создателя действия, одной из первых строк функции создателя действия, вы делаете запрос ajax. Это сетевой запрос, который будет охватывать этот JSON API.

Ключевая часть, которую нужно понять, заключается в том, что когда мы делаем этот запрос, мы переходим к следующей строке кода, где формируем этот объект действия и возвращаем его. Время между этими двумя шагами, между выполнением запроса и возвратом действия, является мгновенным.

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

Итак, после того, как мы вернем наше действие от создателя действия, в какой-то момент в будущем мы получим ответ от JSON API.

Таким образом, между выполненным Ajax-запросом и действием, возвращаемым создателем действия, может быть мгновенное, но время между возвращением действия создателем действия и полученным ответом от JSON API может занять больше времени.

Независимо от того, сколько времени это займет, к тому времени, когда действие появляется внутри редуктора, оно всегда имеет наши данные, доступные из нашего API.

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

import { SAVE_COMMENT, FETCH_COMMENTS } from 'actions/types';

export default function(state = [], action) {
  switch (action.type) {
    case SAVE_COMMENT:
      return [...state, action.payload];
    case FETCH_COMMENTS:
      debugger;
      const comments = action.payload.data.map(comment => comment.name);
      return [...state, ...comments];
    default:
      return state;
  }
}

Когда я нажал кнопку "Получить комментарии", когда он вызвал создателя действия, и на вкладке "Мои источники" я сразу же нажал debugger заявление.

Это доказательство того, что всякий раз, когда это действие появляется внутри редуктора, оно получает ответ, полученный от API.

Теперь давайте удалим промежуточное ПО Redux Promise и посмотрим, что произойдет.

Middleware:

export default ({ children, initialState = {} }) => {
  const store = createStore(
    reducers,
    initialState,
    applyMiddleware(reduxPromise)
  );

Промежуточное ПО исчезло:

export default ({ children, initialState = {} }) => {
  const store = createStore(reducers, initialState, applyMiddleware());

  return <Provider store={store}>{children}</Provider>;
};

Что это?

payload это не ответ, возвращаемый из JSON API, а ожидающий Promise Это означает, что наш запрос все еще находится в сети и ожидает возврата из JSON API. Очевидно, что без промежуточного ПО Redux Promise наше приложение не будет работать должным образом.

Создатели действий не были разработаны для поддержки асинхронного запроса, я не знаю, как это называется.

Мы используем промежуточное программное обеспечение, такое как Redux Promise, для просмотра действий, которые должны быть отправлены редуктору, и у нас есть возможность полностью отложить, зарегистрировать, изменить или остановить действие, и только через эти промежуточные программы мы заставляем эти асинхронные запросы работать так, как нужно. мы ожидаем этого. Мы используем Redux Promise, потому что мы хотим проверять каждое действие, возвращаемое создателем действия, и если оно содержит запрос API или какой-то асинхронный запрос, мы хотим отложить его, чтобы мы могли получить ответ до того, как действие перейдет к редукторы. Вот что Redux Promise делает для нас.

Источник

Вам нужны эти промежуточные программы, чтобы избежать обусловленности расы, потому что javascript является асинхронным. Различия между ними заключаются только в реализации, работе с функциями, сагах с генераторами и т. Д.

Источник
Другие вопросы по тегам