Porównanie Subjects w RxJS

W bibliotece RxJS występuje 5 rodzajów Subject. Warto wiedzieć, że wszystkie z nich są typem Observable i różnią się tym od zwykłego Observable, że wszystkie subskrypcje otrzymują wyemitowaną wartość w strumieniu w tym samym momencie tzw. multicast.

Rodzaje

Wśród nich możemy wyróżnić: Subject, BehaviorSubject, ReplaySubject, AsyncSubject oraz WebSocketSubject. Każdy z nich charakteryzuję się innym zachowaniem. Między innymi posiadają wartość początkową, emitują wartości dopiero, gdy strumień zostanie zamknięty lub przy subskrypcji emitują n ilości poprzednio wyemitowanych wartości.

Subject

import { Subject } from 'rxjs';

const subject: Subject = new Subject();

Jest punktem wyjścia dla innych rodzajów. Ciekawostką jest, że Subject może zostać użyty również jako observer czyli obiekt przekazany do funkcji subscribe(), ponieważ posiada metody next(), error() oraz complete().

import { Subject } from 'rxjs';

const subject: Subject = new Subject();

someObservable.subscribe(subject);

someObservable.subscribe({
  next: () => {},
  error: () => {},
  complete: () => {}
});

BehaviorSubject

import { BehaviorSubject } from 'rxjs';

const subject: BehaviorSubject = new BehaviorSubject(<wartość początkowa>);

Drugi najczęściej używany typ Subject, czyli BehaviorSubject cechuje się tym, że wymagane jest podanie jego wartości początkowej.

Gdy nowy subskrybent podłączy się do BehaviorSubject otrzyma ostatnio wyemitowaną wartość.

ReplaySubject

Zachowanie podobne do BehaviorSubject z dwoma różnicami: nie podajemy wartości początkowej i każdy nowy subskrybent dostanie n ostatnio wyemitowanych wartości.

Posiada także dodatkowy argument, który określa jak „stare” mogą być nasze ostatnio wyemitowane wartości (czas podawany jest w milisekundach).

import { ReplaySubject } from 'rxjs';

const subject: ReplaySubject = new ReplaySubject(<liczba wartości do wyemitowania>, <okno czasowe>);

AsyncSubject

Na swój sposób unikalny rodzaj Subject. Działa odmiennie od reszty, bo wartości są dopiero emitowane, gdy strumień zostanie zamknięty.

import { AsyncSubject } from 'rxjs';

const subject: AsyncSubject = new AsyncSubject();

WebSocketSubject

Subject specjalnego użycia, który ułatwia nam komunikację z WebSocket. Funkcja subscribe() w tym wypadku będzie nam służyła jako odbiór wiadomości z WebSocket, a funkcja next() do wysyłania informacji.

import { webSocket, WebSocketSubject } from 'rxjs/websocket';

const subject: WebSocketSubject = webSocket(<url>);

Podsumowanie

Mam nadzieję, że choć trochę przybliżyłem wam bliżej różne rodzaje Subject. Najczęściej używanym rodzajem według mnie jest BehaviorSubject, choć inne również mają swoje zastosowania w codziennej pracy.

Udostępnij
Default image
Wojciech Szućko
Jestem Angular Developerem. Przedstawiam techniki i technologie, które wykorzystuje w codziennej pracy z web aplikacjami. Tworzyłem projekty między innymi dla Bank Pekao S.A., AlphaTauri czy Playmobil.