5 najlepszych praktyk RxJS podczas tworzenia aplikacji w Angular

RxJS to jedno z najpotężniejszych narzędzi dostępnych w ekosystemie Angular, pozwalające w elegancki sposób obsługiwać operacje asynchroniczne i reaktywne przepływy danych. Wraz z kolejnymi wersjami Angular wprowadzane są nowe mechanizmy, takie jak AsyncPipe, DestroyRef czy Signals, które znacząco ułatwiają pracę i poprawiają wydajność aplikacji.

1. Poprawna implementacja Observable

Poprawna implementacja Observable jest kluczowa dla efektywnego wykorzystania RxJS w aplikacjach Angular. W najnowszych wersjach (Angular 16+) warto wykorzystywać AsyncPipe w szablonach, który automatycznie zarządza subskrypcjami i zapobiega wyciekom pamięci.
W kodzie TypeScript zaleca się korzystanie z DestroyRef w połączeniu z operatorem takeUntil w celu automatycznego czyszczenia subskrypcji po zniszczeniu komponentu.

Ważne jest też, aby używać operatorów takich jak map, filter czy switchMap, które pozwalają zminimalizować ilość pamięci potrzebnej do przechowywania strumieni danych. Pamiętaj również o umieszczaniu takeUntil po operatorach wyższego rzędu (np. switchMap, mergeMap), aby zamknąć także ich wewnętrzne subskrypcje.

Czy szukasz wykonawcy projektów IT ?

Sprawdź case studies

2. Operatory RxJS, które ułatwią Ci pracę

Do najważniejszych operatorów RxJS należą:

• map – przekształca wartości strumienia na inne wartości,
• filter – filtruje elementy na podstawie kryteriów,
• switchMap – zamienia jeden strumień na inny i anuluje poprzednie,
• mergeMap – łączy strumienie równolegle,
• concatMap – przetwarza strumienie sekwencyjnie,
• debounceTime i distinctUntilChanged – ograniczają niepotrzebne emisje,
• catchError – obsługuje błędy w strumieniach danych.

Coraz częściej wykorzystuje się też combineLatest, aby łączyć dane z kilku Observable’ów w jeden spójny wynik – szczególnie przy dynamicznych formularzach lub złożonych widokach.

3. Snack-bar lub toast do wyświetlenia błędów

Toast lub snack-bar w Angular (np. z modułu MatSnackBar) to świetny sposób na informowanie użytkowników o błędach. W połączeniu z RxJS możemy sterować czasem wyświetlania, opóźnieniami i kolejnością komunikatów.

Najlepszą praktyką jest stworzenie dedykowanego serwisu do obsługi komunikatów, który reaguje na błędy z Observable’ów, wykorzystując np. catchError i opcjonalnie retry, aby spróbować ponowić operację przed wyświetleniem błędu.

4. Subskrypcje z automatycznym czyszczeniem

Unikanie wycieków pamięci jest kluczowe w aplikacjach Angular.
Dziś można to osiągnąć poprzez:

• AsyncPipe – automatyczne zarządzanie subskrypcjami w HTML,
• DestroyRef – nowy mechanizm Angular do powiązania sprzątania subskrypcji z cyklem życia komponentu,
• takeUntil / takeWhile – do kontrolowanego kończenia subskrypcji.

Przy operatorach wyższego rzędu (switchMap, mergeMap) pamiętaj, aby takeUntil umieścić po nich, aby zamknąć wszystkie wewnętrzne subskrypcje.

5. Unikanie błędów wyświetlania strony

W przypadku operacji asynchronicznych warto stosować switchMap, aby anulować wcześniejsze żądania, jeśli nadejdzie nowe – zapobiega to wyświetlaniu nieaktualnych danych.

Błędy obsługuj przy pomocy catchError wewnątrz operatorów takich jak switchMap, dzięki czemu błąd nie zakończy całego strumienia, a jedynie konkretną operację. W połączeniu z retry lub dedykowanymi mechanizmami “revival” można ponawiać próby działania efektów NgRx lub zapytań HTTP bez przerywania pracy aplikacji.