Definicja #
RxJS (Reactive Extensions for JavaScript) to biblioteka programowania reaktywnego dla JavaScript i TypeScript, będąca portem ReactiveX dla JS. Implementuje wzorzec Observer i Iterator przez centralny typ Observable — strumień zdarzeń, danych lub wartości w czasie.
Kluczowe koncepcje RxJS:
- Observable — lazy producer wartości; emituje wartości, błędy lub sygnał zakończenia; nie robi nic dopóki ktoś się nie subskrybuje
- Observer — konsument Observable; implementuje
next(),error(),complete() - Subscription — wynik
subscribe(); zarządza zasobami;unsubscribe()zatrzymuje strumień - Operatory — czyste funkcje transformujące strumienie; komponowane przez
pipe():- Transformujące:
map(),pluck(),scan() - Filtrujące:
filter(),take(),debounceTime(),distinctUntilChanged() - Łączące strumienie:
switchMap(),mergeMap(),concatMap(),exhaustMap()— flattening operators - Kombinujące:
combineLatest(),forkJoin(),withLatestFrom() - Obsługa błędów:
catchError(),retry(),retryWhen()
- Transformujące:
- Subject — Observable i Observer jednocześnie; służy do multicastingu (
BehaviorSubject,ReplaySubject,AsyncSubject) - Schedulers — kontrola wykonania (synchroniczne, asynchroniczne, animationFrame)
RxJS jest rdzeniem Angulara — HttpClient, Router, ReactiveFormsModule i ActivatedRoute zwracają Observable. W nowoczesnym Angular używany coraz rzadziej bezpośrednio dzięki Signals API, ale wciąż niezbędny dla zaawansowanych scenariuszy.
Zastosowania #
- HTTP requests w Angular — HttpClient zwraca Observable; operatory switchMap, catchError do obsługi żądań, anulowania i błędów
- Reaktywne formularze Angular — FormControl.valueChanges jako Observable; debounceTime + distinctUntilChanged dla live search
- State management — NgRx (Redux dla Angular) opiera się na RxJS; Actions, Reducers, Selectors jako strumienie
- WebSocket i real-time data — RxJS do obsługi strumieni WebSocket; automatyczne reconnection przez retryWhen
- Koordynacja wielu asynchronicznych operacji — forkJoin do równoległych requestów, combineLatest do reaktywnego UI
Ścieżka nauki #
RxJS jest obowiązkowy dla Angular Developerów — warto zrozumieć go głęboko, nie tylko używać powierzchownie.
Zacznij od:
- Podstawy Observable: tworzenie (
of(),from(),interval()), subscribe, unsubscribe - Podstawowe operatory:
map(),filter(),tap(),take() - pipe() — kompozycja operatorów; każdy operator to czysta funkcja
- AsyncPipe w Angular —
observable$ | asyncautomatycznie subskrybuje i odsubskrybowuje
Następnie pogłębiaj:
- Flattening operators — kluczowe:
switchMap(anuluje poprzednie),mergeMap(równoległe),concatMap(kolejkuje),exhaustMap(ignoruje nowe podczas trwania) - Subject i BehaviorSubject — kiedy i jak używać do state sharing
- Sygnały Angular (Signals) — nowoczesna alternatywa dla RxJS w Angular 16+;
toSignal()jako most między RxJS a Signals - RxJS Marbles — wizualna technika testowania strumieni RxJS
FAQ #
- Czym jest Observable w RxJS?
- Observable to lazy strumień wartości — producent danych, który nie robi nic dopóki ktoś się nie subskrybuje. Może emitować: jedną lub wiele wartości, błąd lub sygnał zakończenia. Observable jest zimny (cold) domyślnie — każdy subscriber dostaje osobne wykonanie. Contrakt: zero lub więcej next(), opcjonalnie error() lub complete().
- Czym różni się switchMap od mergeMap?
- switchMap anuluje poprzednie wewnętrzne Observable gdy nowa wartość pojawi się na wejściu — idealny dla HTTP requestów (live search: nowy keystroke anuluje poprzedni request). mergeMap uruchamia wszystkie wewnętrzne Observable równolegle bez anulowania. concatMap kolejkuje — czeka na zakończenie poprzedniego. exhaustMap ignoruje nowe wartości podczas trwania bieżącego Observable.
- Dlaczego warto używać AsyncPipe zamiast ręcznego subscribe?
- AsyncPipe (| async w szablonie Angular) automatycznie subskrybuje Observable i odsubskrybowuje przy zniszczeniu komponentu — eliminując jeden z najczęstszych wycieków pamięci w Angular. Upraszcza kod: zamiast subscribe/unsubscribe w ngOnInit/ngOnDestroy, Observable jest konsumowany bezpośrednio w template. Trigguje też ChangeDetection przy nowej wartości.
- Czy RxJS jest wciąż potrzebny w Angular z Signals?
- Signals (Angular 16+) upraszczają zarządzanie stanem synchronicznym i reaktywność komponentów — zastępują wiele przypadków użycia Subject/BehaviorSubject. Jednak RxJS wciąż jest potrzebny dla: HttpClient (zwraca Observable), złożonych asynchronicznych przepływów, NGRx i WebSocketów. toSignal() i toObservable() łączą oba światy. Angular nie deprecjonuje RxJS.
- Ile zarabia Angular Developer znający RxJS?
- RxJS jest wymagany w większości ofert Angular Developer. Mid Angular Developer z biegłą znajomością RxJS zarabia od 12 000 do 22 000 zł brutto. Senior ze znajomością NgRx, Signals i zaawansowanych operatorów RxJS: 20 000 do 35 000 zł. Biegłość w RxJS to jeden z kluczowych wyróżników na rozmowach o pracę Angular.
