Если у тебя проблемы с побочными эффектами, мне жаль тебя, сынок. Давайте посмотрим, как redux-saga может облегчить вам жизнь.

Эта статья требует базового понимания React и Redux. Если вы хотите быстро освежиться, я предлагаю ознакомиться с официальным руководством по реакции, прежде чем переходить к введению в redux.

Так что же такое redux-saga?

redux-saga - это библиотека, которая призвана упростить управление побочными эффектами приложений (т.

Звучит здорово. Давайте посмотрим, может ли redux-saga помочь нам справиться с некоторыми асинхронными побочными эффектами.

Сначала давайте создадим приложение React и установим необходимые зависимости. Пакет npm c reate-react-app - отличный инструмент для простого создания веб-приложения реагирования с помощью одной команды. Давайте установим его, создадим демонстрационный проект и запустим его.

npm install -g create-react-app
create-react-app redux-demo
cd redux-demo
npm start

Теперь у вас должна быть возможность просмотреть приложение по умолчанию по адресу http: // localhost: 3000. Страница автоматически перезагрузится, если вы внесете изменения в код. Теперь мы готовы установить redux, redux-saga и axios.

npm i --save redux redux-saga axios

Аккуратный. Начнем с настройки redux. Первое, что нам нужно, это магазин redux.

Теперь нам нужно обернуть наше приложение поставщиком магазина.

Тогда мы готовы оживить все это в нашем DemoComponent.

Итак, что здесь происходит? Мы подключили наш DemoComponent к состоянию redux с помощью ловушки useSelector. Когда мы нажимаем кнопку, мы должны увидеть имя John Doe.

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

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

  1. Асинхронный вызов API с запросом имени
  2. Асинхронный вызов отдельного API с запросом фамилии
  3. Обновление магазина и отображение значения пользователю.

Поскольку теперь у нас есть побочные эффекты асинхронности, давайте решим их с помощью redux-saga.

Давайте начнем с изменения нашего магазина Redux, чтобы включить промежуточное программное обеспечение саги как часть настройки магазина.

Как вы можете видеть, хранилище теперь инициализировано с подключенным промежуточным программным обеспечением redux-saga. Давайте посмотрим на наши саги:

Как видно из аннотации function *, а также ключевого слова yield, redux-saga основана на функциях генератора. Вы должны быть в состоянии понять сагу о сокращении, даже если у вас нет полного понимания основной работы функций генератора, но если вам интересно, вы можете ознакомиться с этой статьей.

Итак, что происходит?

  • Мы включили промежуточное программное обеспечение саги как часть нашей установки Redux, которая позволяет сагам прослушивать отправленные действия и реагировать на них.
  • Наш DemoComponent отправляет тип «SET_NAME»
  • watchSetNameSaga выполняет каждое действие типа «SET_NAME» и запускает setNameSaga. В саге о setName мы получаем имя и фамилию из API и отправляем действие «SET_NAME_FULFILLED» с полным именем после завершения обоих вызовов API.
  • Редуктор обновляет состояние действия «SET_NAME_FULFILLED», и наш DemoComponent повторно отображается с обновленным состоянием.

Последовательность действий теперь изменена с Действие → Редуктор,
на Действие → Сага → Редуктор.

Обратите внимание на эффект takeEvery, который мы использовали в нашем watchSetNameSaga. Это эффект саги, гарантирующий, что все отправленные действия этого типа запускают setNameSaga. Это один из многих эффектов, имеющихся в вашем распоряжении при использовании промежуточного программного обеспечения redux-saga, краткое знакомство с некоторыми из них:

  • takeLatest: выполняет только последнее действие заданного типа и отменяет все ранее запущенные саги. Больше никаких ненужных рассылок о вашем API.
  • гонка: установите гонку между двумя эффектами, что отлично подходит, когда у вас есть отменяемое действие пользователя.
  • retry: ну, вроде как очевидно. Он повторяет данную функцию заданное количество раз.
  • И многое другое, полный список можно найти в Справочнике по API.

Еще одна замечательная особенность redux-saga - проверяемость функций генератора. Давайте напишем быстрый тест для нашего setNameSaga, используя jest и redux-saga-testable, чтобы продемонстрировать, насколько это тривиально:

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