Redux-saga
otus.ru
Проверить, идет ли запись
Меня хорошо видно
&& слышно?
Ставим “+”, если все хорошо
“-”, если есть проблемы
Redux saga
Тема вебинара
Шепелев Максим
Главный разработчик
5 лет опыта фронтенд разработчиком, занимая разные должности от middle до tech-lead
Работаю в компании metacommerce
Redux-saga
Redux-saga
redux-saga — это библиотека, которая призвана упростить и улучшить управление побочными эффектами в приложениях на Redux. Это middleware, которое реагирует на экшены после их обработки редюсерами. Саги могут запускаться, останавливаться и отменяться из основного приложения с помощью обычных действий Redux.
Чтобы начать работу с redux-saga необходимо:�
npm install redux-saga
yarn add redux-saga
Подключение
Начало работы
Сага - обычная функция-генератор со знаком *. В данном случае всё, что она делает - это выводит приветственное сообщение в консоль.
//sagas.js
Для запуска нашей Саги нужно:
Начало работы
watcher
Watcher
Watcher Saga — это сага, которая следит за определенными действиями (actions) Redux и решает, что делать, когда такое действие происходит. Обычно watcher саги не выполняют никаких действий напрямую, они лишь отслеживают возникновение определенных действий и запускают соответствующие worker саги.
worker
Worker
Worker Saga — это та часть вашего кода, которая непосредственно выполняет желаемое действие, например, асинхронный запрос к API. Worker саги обычно "делают тяжелую работу". Они содержат логику для выполнения конкретных задач, таких как загрузка данных, обработка форм, выполнение асинхронных операций и т.д. Эти саги вызываются watcher сагами, когда происходит определенное действие.
effects
Effects
В Redux Saga, эффекты используются для выполнения различных задач, таких как вызов асинхронных функций, запуск других саг, ожидание действий и многое другое. Эффекты создаются с помощью специальных вспомогательных функций, и каждый из них имеет свою специфику. Вот основные виды эффектов:
take
takeEvery
Приостанавливает выполнение саги и прослушивает выполняемые actions до тех пор, пока action, соответствующий pattern, не будет задиспатчен. После этого возобновляет выполнение саги. Является блокирующей.
Прослушивает все действия указанного типа и запускает сагу каждый раз, когда действие происходит. Это один из наиболее часто используемых эффектов.
takeLatest
takeLeading
Похож на takeEvery, но автоматически отменяет предыдущую сагу, если она все еще выполняется в момент получения нового действия того же типа.
Прослушивает действия указанного типа, но игнорирует все последующие действия, пока текущая сага не завершится.
call
fork
Функция вызова других функций (fetchData) с аргументами (apiEndpoint). В качестве fn могут быть как синхронные, так и асинхронные, возвращающие Promise, а также являющиеся функцией-генератором. Call является блокирующей функцией, т.е. она приостанавливает сагу до своего завершения.
так же как и call является функцией вызова функции, но с тем отличием, что она не является блокирующей. Т.е. после запуска fork(...) сразу выполняется следующая строка кода, а не дожидается результата её выполнения.
all
race
Позволяет одновременно запустить несколько саг или эффектов и ждать их завершения
Позволяет сагам участвовать в гонке, где только первая завершенная сага влияет на дальнейшее выполнение.
put
select
Функция отправки action, её можно воспринимать как dispatch(action). Является блокирующей.
Функция получения актуального значения из state. Selector — функция, которая принимает актуальный state, а возвращает нужную его часть. Вызов select без аргументов (yield select()) можно воспринимать как store.getState().
cancel
delay
Отменяет выполнение запущенной саги.
Позволяет саге ждать заданное количество миллисекунд. Полезно для ситуаций, когда требуется задержка.
Обработка ошибок
Обработка ошибок
Если родительская сага не содержит обработчика ошибок и вызывает дочерние саги через fork, то в случае ошибки в одной из них ошибка всплывет до родительской саги, что вызовет ее падение. В таком случае лучше использовать эффект spawn. Он позволит даже в случае падения одной из дочерних саг все равно выполнить остальные
Вопросы?
Ставим “+”,
если вопросы есть
Ставим “–”,
если вопросов нет
Полезные материалы
Полезные материалы
Рефлексия
Заполните пожалуйста опрос о занятии по ссылке в чате