RxJS и Angular: декларативное If / Else

Примечания к оператору фильтра RxJS

Исходный код: Github 🚀 | Живые примеры и фрагменты 🚀

Статья Цель 🎯

Использование оператора фильтра RxJS. Используйте последовательную парадигму декларативного программирования, , чтобы потенциально улучшить ясность кода и удобочитаемость.

Ключевые концепции 📝

• Поток управления: это порядок, в котором отдельные операторы, инструкции или вызовы функций императивной программы выполняются или оценен
• Выбор: выполнение различных вычислений или действий в зависимости от того, оценивается ли указанное программистом логическое условие как истинное или ложное.
• Декларативное программирование: это парадигма программирования - стиль построения структуры и элементов компьютерных программ, который выражает логику вычисления без описания его потока управления.
• Реактивное программирование: декларативная парадигма программирования, связанная с потоками данных и распространением изменений - RxJS - это библиотека для реактивного программирования (таким образом, RxJS - декларативная парадигма)
• Оператор фильтра RxJS: фильтрует элементы, выдаваемые источником Observable, выдавая только те элементы, которые удовлетворяют указанному предикату.

Объяснение и резюме 🧪

Акцент на явном потоке управления - вот что отличает императивное программирование от декларативного.

Мы можем (и большинство из нас, в том числе и я, вероятно, так и делают) смешивать RxJS с императивным программированием. Написание условных операторов (if / else) следующим образом:

Использование потоков (Observables), композиции (слияние) и оператора фильтра. Мы можем получить тот же результат, не записывая if / else.

💡 Примечание: императивное программирование - это неплохо или антишаблон. - Это просто еще один способ добиться того же результата.

Основное преимущество (imo) заключается в сохранении одной парадигмы программирования (декларативной). Я считаю, что это улучшает ясность и удобочитаемость некоторых из наших более поздних примеров.

Как работает фильтр

Фильтр предотвращает появление Observable с предикатом falsey. Мы можем использовать слияние, чтобы объединить обе наблюдаемые вместе. Затем мы получаем выбросы от наблюдаемого с проходящим предикатом / условием.

В нашем примере, если пользователь не вошел в систему, isNotAuthenticated$ выдаст сообщение. Перенаправление пользователя на экран входа в систему. isAuthenticated$ не будет излучать, поэтому перенаправление не сработает.

Примеры 🎨

Использование Angular, Akita и Angular In-Memory API

Базовый пример

Переключить побочные эффекты на основе Status Enum

На более практическом примере. У нас есть таблица «Заказы на работу». Когда активируется конкретное рабочее задание, мы запускаем логику в зависимости от его статуса.

После подписки на statusSideEffectsListener$. Затем мы получаем выбросы от внутреннего наблюдаемого с проходящим предикатом.

Например, если Статус рабочего задания ON_HOLD, будет выполняться только логика в isOnHold$.

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

Вложенный пример

Выберите существующий или создайте новый заказ на работу

Мы можем создать эквивалент вложенных условий, используя switchMap.

Сделаем еще один шаг вперед в нашем первоначальном примере. Давайте добавим логику активации / побочные эффекты, используя тот же шаблон. Однако мы хотим запускать логику statusSideEffectsListener$ только в том случае, если у нас есть активное рабочее задание.

💡 Совет: возвращая Observable<void>, мы можем указать другим читателям, что результат Observable бесполезен; поскольку его цель - запустить побочные эффекты.

Используя тот же шаблон, что и statusSideEffectsListener$

• createNewWoListener$ создается новое рабочее задание
• loadExistingWoListener$ выбирается существующее рабочее задание
• deactivateWoListener$ отменяется выбор существующего рабочего задания. Обратите внимание, что мы не будем подписываться на statusSideEffectsListener$ в этом контексте, поскольку мы не switchMap на него.

Важно: statusSideEffectsListener$ внутренне использует take(1) для завершения после одной передачи. Предотвращение его появления при каждом изменении активного рабочего задания.

Заметки автора

Я стараюсь писать статьи в более короткой форме, избегая длинного повествования. Сосредоточение внимания на основной идее и предоставление исходного кода / примеров для использования в качестве справочника.

Расскажите, что вам понравилось / не понравилось в этом подходе. Спасибо за прочтение!