Асинхронные операции в приложениях React Redux

Хотите разработать приложение React JS?

Использование Redux Thunk

Redux Thunk — это промежуточное ПО для Redux. Это в основном позволяет нам возвращать functionobjects Это помогает, предоставляя dispatchgetState Мы эффективно используем отправку, отправляя необходимые действия в нужное время. Преимущества:

• разрешить множественные отправки внутри функции
• привязка бизнес-логики к выборке будет вне компонентов React и перенесена в действия.

В нашем случае мы можем переписать действие следующим образом:

 export const getRestaurants = () => {
  return (dispatch) => {
  dispatch(fetchStarted()); // fetchStarted() returns an action

  fetch('/details')
    .then((response) => {
      dispatch(fetchUserDetailsSuccess()); // fetchUserDetailsSuccess returns an action
      return response;
     })
    .then(details => details.city)
    .then(city => fetch('/restaurants/city'))
    .then((response) => {
      dispatch(fetchRestaurantsSuccess(response)) // fetchRestaurantsSuccess(response) returns an      action with the data
    })
    .catch(() => dispatch(fetchError())); // fetchError() returns an action with error object
  };
}

Как видите, теперь у нас есть хороший контроль над тем, когда dispatch Каждый вызов функции, например fetchStarted()fetchUserDetailsSuccess()fetchRestaurantsSuccess()fetchError() Теперь задача редукторов — обрабатывать каждое действие и обновлять представление. Я не обсуждал редуктор, поскольку отсюда все просто и реализация может быть разной.

Чтобы это работало, нам нужно соединить компонент React с Redux и связать действие с компонентом с помощью библиотеки Redux. Как только это будет сделано, мы можем просто вызвать this.props.getRestaurants()

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

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

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

Использование Redux-Saga

Используя промежуточное программное обеспечение Redux-Saga, мы можем получить дополнительные преимущества, которые решают большинство вышеупомянутых функций. Redux-Saga был разработан на базе генераторов ES6.

Redux-Saga предоставляет API, который помогает достичь следующего:

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

Как работают саги?

Sagas использует комбинацию генераторов ES6 и API-интерфейсов async await для упрощения асинхронных операций. Он в основном работает в отдельном потоке, где мы можем выполнять несколько вызовов API. Мы можем использовать их API, чтобы сделать каждый вызов синхронным или асинхронным в зависимости от варианта использования. API предоставляет функциональные возможности, с помощью которых мы можем заставить поток ждать в одной строке, пока запрос не вернет ответ. Помимо этого, есть много других API, предоставляемых этой библиотекой, что делает запросы API очень простыми в обработке.

Рассмотрим наш предыдущий пример: если мы инициализируем сагу и настраиваем ее с Redux, как указано в их документации, мы можем сделать что-то вроде этого:

 import { takeEvery, call } from 'redux-saga/effects';
import request from 'axios';

function* fetchRestaurantSaga() {

  // Dispatches this action once started
  yield put({ type: 'FETCH_RESTAURANTS_INITIATED '});

  try {
    // config for fetching details API
    const detailsApiConfig = {
      method: 'get',
      url: '/details'
    };
    // Blocks the code at this line till it is executed
    const userDetails = yield call(request, config);

    // config for fetching details API
    const restaurantsApiConfig = (city) {
      method: 'get',
      url: `/restaurants/${city}`,
    };

    // Fetches all restuarants
    const restaurants = yield call(request, restaurantsApiConfig(userDetails.city));

    // On success dispatch the restaurants
    yield put({
      type: 'FETCH_RESTAURANTS_SUCCESS',
      payload: {
        restaurants
      },
    });

  } catch (e) {
    // On error dispatch the error message
    yield put({
      type: 'FETCH_RESTAURANTS_ERROR',
      payload: {
        errorMessage: e,
      }
    });
  }
}

export default function* fetchRestaurantSagaMonitor() {
  yield takeEvery('FETCH_RESTAURANTS', fetchInitial); // Takes every such request
}

Поэтому, если мы отправим простое действие с типом FETCH_RESTAURANTS На самом деле, промежуточное программное обеспечение не использует ни одно из действий. Он просто слушает и выполняет некоторые дополнительные задачи, и при необходимости отправляет новое действие. Используя эту архитектуру, мы можем отправлять несколько запросов, каждый из которых описывает

 const fetchUserDetails = action$ => (
  action$.ofType('FETCH_RESTAURANTS')
    .switchMap(() =>
      ajax.getJSON('/details')
        .map(response => response.userDetails.city)
        .switchMap(() =>
          ajax.getJSON(`/restaurants/city/`)
            .map(response => ({ type: 'FETCH_RESTAURANTS_SUCCESS', payload: response.restaurants })) // Dispatching after success
)
         .catch(error => Observable.of({ type: 'FETCH_USER_DETAILS_FAILURE', error }))
      )
    )
)