tgoop.com/summon_the_coder/20
Last Update:
Музыкальный RxJS или как обрабатывать события правильно
Higher-order observables — тема безумно интересная и глубокая, но в то же время вызывающая наибольшее непонимание у разработчиков, которые только изучают RxJS. Существует множество способов объяснить, как работают операторы switchMap, concatMap, mergeMap и exhaustMap: можно сравнивать их с потоками воды, конвейерами, очередями заказов и многими другими вещами. Но, на мой взгляд, лучшая аналогия была приведена в телеграм группе по RxJS. Я немного доработал её и вот как она звучит.
Представьте, что у вас есть приложение с «реактивным» музыкальным плеером, и по клику на кнопки можно переключать музыку. Каждая кнопка — это отдельный higher-order observable оператор. Как же будет происходить переключение музыки при клике на эти кнопки?
🎶 switchMap
Если поступает новый клик, текущий трек немедленно останавливается, и начинается новый. Этот оператор повторяет поведение настоящего музыкального плеера, где треки сменяются сразу по нажатию кнопки.
Реальные примеры:
- Когда пользователь вводит текст в строку поиска, приложение отправляет запрос на сервер. Если пользователь продолжает вводить текст, предыдущие запросы отменяются, чтобы не загружать неактуальные данные.
- На странице каталога товаров пользователь может изменять фильтры, и данные обновляются на основе новых параметров.
🎶 mergeMap
Каждый клик запускает новый трек независимо от других, не дожидаясь завершения предыдущего. В итоге все треки играют одновременно, создавая хаотичное наложение.
Реальные примеры:
- Получение уведомлений одновременно из нескольких источников (например, чата и системы оповещений).
- Загрузка данных пользователя и связанных с ним заказов одновременно, чтобы быстрее отобразить информацию.
🎶 concatMap
Этот оператор идеален для терпеливых слушателей. При новом клике он дождется, пока текущая песня доиграет до конца, и только потом включит следующую.
Реальные примеры:
- Отправка формы, а затем запуск загрузки данных, связанных с результатом её обработки.
- Обработка очереди задач (например, отправка файлов) и показ уведомлений о завершении каждой задачи.
🎶 exhaustMap
Оператор идеально подходит для строгого контроля воспроизведения. Если трек уже играет, любые новые клики полностью игнорируются до тех пор, пока текущий трек не закончится. Это как если бы плеер говорил: «Подожди, я занят. Дождись окончания трека, и только потом я приму новую команду».
Реальные примеры:
- Когда пользователь отправляет форму, и нужно игнорировать повторные нажатия кнопки, пока форма не будет отправлена.
- Пользователь вводит одноразовый код, и пока сервер его проверяет, новые попытки игнорируются.
Итак, какой оператор выбрать?mergeMap - если операции могут выполняться одновременно.switchMap - для отмены предыдущих действий при новом событии.concatMap - когда нужно выполнять операции строго по порядку.exhaustMap - для защиты от лишних запусков во время выполнения.
@summon_the_coder
#RxJS #Angular #ReactiveProgramming
BY SUMMON_THE_CODER
Share with your friend now:
tgoop.com/summon_the_coder/20