Если у тебя проблемы с побочными эффектами, мне жаль тебя, сынок. Давайте посмотрим, как 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.
- Асинхронный вызов API с запросом имени
- Асинхронный вызов отдельного API с запросом фамилии
- Обновление магазина и отображение значения пользователю.
Поскольку теперь у нас есть побочные эффекты асинхронности, давайте решим их с помощью 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 может быть правильным инструментом для работы.