Front-end

5 najlepszych praktyk RxJS podczas tworzenia aplikacji w Angular

Opisujemy 5 najlepszych praktyk RxJS, które mogą pomóc w tworzeniu lepszych aplikacji w Angular. RxJS to potężne narzędzie, które pozwala na łatwe zarządzanie reaktywnym programowaniem. Dzięki tym praktykom, korzystanie z RxJS w Angularze staje się o wiele prostsze i przyjemniejsze.

Dawid Jażdżewski

Dawid Jażdżewski

Junior full stack developer

09 cze 2023

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.

 

Powiązane case studies

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.

 

Powiązana usługa

Web development

Projektujemy i tworzymy dedykowane aplikacje webowe - od MVP, które pozwala szybko zweryfikować pomysł, po rozbudowane platformy i systemy rozwijane przez lata. Budujemy zarówno warstwę frontendową, jak i backend, API, bazy danych, panele administracyjne oraz integracje z zewnętrznymi systemami. Pracujemy m.in. z Next.js, React, Node.js, NestJS, Pythonem, PostgreSQL i MongoDB. Tworzymy rozwiązania dopasowane do konkretnego procesu biznesowego: aplikacje SaaS, systemy wewnętrzne, platformy sprzedażowe, serwisy internetowe, marketplace’y i systemy CMS.

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.

FAQ

FAQ – RxJS w aplikacjach Angular

  • RxJS to biblioteka programowania reaktywnego dostarczana razem z Angularem. Ujednolica obsługę zdarzeń asynchronicznych — żądań HTTP, kliknięć, timerów, zmian stanu czy strumieni z formularzy — w jeden spójny model strumieni danych (Observable). Dzięki RxJS możesz komponować zachowania (debounce na polu wyszukiwania, retry przy błędzie sieci, łączenie wielu źródeł) w kilku liniach kodu zamiast pisać własną logikę dla każdego przypadku.

  • Najczęściej wykorzystywane to map (przekształcanie wartości), filter (filtrowanie strumienia), debounceTime (opóźnienie reakcji — typowe przy wyszukiwarce), switchMap (przełączanie na nowy strumień przy każdej wartości — idealne dla zapytań HTTP), catchError (obsługa błędów), oraz takeUntil (zakończenie subskrypcji wraz z innym strumieniem). Opanowanie tych sześciu operatorów rozwiązuje większość przypadków w typowej aplikacji.

  • Każda nieanulowana subskrypcja to ryzyko wycieku pamięci — komponent zostaje zniszczony, ale subskrypcja nadal trzyma referencje do jego pól. Najczystszą metodą jest pipe(takeUntilDestroyed()) wprowadzony w Angularze 16, który automatycznie zamyka strumień przy zniszczeniu komponentu. Alternatywnie używaj async pipe w szablonach — Angular sam zarządza cyklem życia. Ręczne wywoływanie unsubscribe w ngOnDestroy też działa, ale jest podatne na pomyłki.

  • switchMap anuluje poprzedni strumień, gdy pojawi się nowa wartość — używaj go dla wyszukiwarek, autocompletów i nawigacji, gdzie liczy się tylko najnowsze żądanie. mergeMap równolegle obsługuje wszystkie strumienie — pasuje do operacji niezależnych, np. wysyłki kilku plików jednocześnie. concatMap kolejkuje strumienie i wykonuje po kolei — przydaje się przy operacjach, których kolejność jest istotna (np. zapis do bazy).

  • Najprostszy sposób to operator tap, który pozwala podglądać wartości w strumieniu bez modyfikowania go. W konsoli przeglądarki ustawiasz console.log w tap i widzisz każdą emisję. Dla bardziej zaawansowanych przypadków sprawdź narzędzia jak RxJS Marbles (testy z notacją marble) lub Angular DevTools w trybie debugowania. Pamiętaj, że strumienie są leniwe — bez subskrypcji nic się nie dzieje, co bywa źródłem pozornych błędów.

Blog

Powiązane artykuły

Czytaj więcej
Front-end

Rozszerzanie TypeScript z pomocą Utility Types: Kluczowe funkcje i zastosowania

Rozszerzanie TypeScript za pomocą Utility Types to potężne narzędzie, które zwiększa ekspresywność języka i ułatwia pracę programistom. W tym artykule przyjrzymy się kluczowym funkcjom i zastosowaniom Utility Types, które pozwalają na manipulację typami w TypeScript. Dzięki nim możemy tworzyć bardziej elastyczne i reużywalne struktury kodu. Dowiedz się, jak wykorzystać Utility Types to ulepszyć swoje projekty.

Tomasz Kozon
30 cze 2023
Front-end

Jak skutecznie korzystać z conditional types w TypeScript

Zajmiemy się wprowadzeniem w świat zarządzania typami warunkowymi w TypeScript. Jest to potężne narzędzie, które umożliwia tworzenie bardziej dynamicznych i skalowalnych aplikacji. Czy jesteś gotów na wyzwania, jakie niesie za sobą to zaawansowane zagadnienie? Zapraszam do lektury.

Tomasz Kozon
19 wrz 2023
Front-end

Pinia: Nowoczesna i wydajna biblioteka do zarządzania stanem w aplikacjach Vue.js

Pinia to innowacyjna biblioteka do zarządzania stanem, specjalnie zaprojektowana dla aplikacji Vue.js. Wyróżnia się na tle innych podobnych narzędzi swoją wydajnością, prostotą i elastycznością. Pozwala na ustrukturyzowanie i skuteczne kontrolowanie danych w Twojej aplikacji. Zapraszam do zgłębienia tematu, by odkryć pełnię możliwości Pinii.

Tomasz Kozon
01 wrz 2024
Front-end

TanStack Router: Nowoczesne, w pełni bezpieczne rozwiązanie do routingu dla React

TanStack Router to zaawansowane, w pełni bezpieczne narzędzie do routingu dla React. Ten nowoczesny router, wykorzystuje pełen potencjał TypeScript do zgłaszania błędów na etapie kompilacji, znacząco podnosząc bezpieczeństwo i efektywność tworzonych aplikacji. Zainspirowany przez React-Router i Reach-Router, oferuje unikalne cechy, które przyczyniają się do jego rosnącej popularności.

Tomasz Kozon
23 maj 2025
Front-end

Client-side Hydration: jak działa i dlaczego jest kluczowa dla nowoczesnych aplikacji webowych

Nowoczesne aplikacje webowe muszą być jednocześnie szybkie, interaktywne i przyjazne dla użytkownika już od pierwszego załadowania strony. Właśnie w tym kontekście coraz większe znaczenie zyskuje client-side hydration, czyli mechanizm łączący renderowanie po stronie serwera z logiką uruchamianą w przeglądarce. Dzięki niemu możliwe jest wyświetlenie treści niemal natychmiast, a następnie płynne przejście do pełnej interaktywności aplikacji.

Tomasz Kozon
13 gru 2025
Front-end

Turbopack w praktyce: jak działa nowy bundler od Vercela

Rosnąca złożoność aplikacji webowych sprawia, że wydajność narzędzi developerskich ma dziś ogromne znaczenie. Turbopack, nowy bundler od Vercela, powstał jako odpowiedź na ograniczenia klasycznych rozwiązań, takich jak Webpack, szczególnie w dużych projektach Next.js. Jego głównym celem jest maksymalne skrócenie czasu startu aplikacji i natychmiastowy hot reload podczas pracy z kodem.

Tomasz Kozon
06 gru 2025