RxJS: Podstawy

Czym jest RxJS?

RxJS to biblioteka napisana, w JavaScript służąca do programowania reaktywnego. Jeśli programowałeś już wcześniej w Angularze prawdopodobnie korzystałeś też z RxJS.

Służy ona do budowania aplikacji opartych o asynchroniczność lub na zdarzeniach.

Podstawowe pojęcia

Observable

Jest to podstawowe pojęcie, w RxJS. Observable należy postrzegać jako zbiór danych lub zdarzeń, które mogą zostać wywołane.

Na przykład Observable zdarzenie kliknięcia myszki, przycisku na klawiaturze.

Taki obiekt może zostać na wiele różnych sposób:

  import { Observable } from 'rxjs';
	
  const observable1 = new Observable();
  
  const buttonEl = document.getElementById('button');
  const observable2 = fromEvent(buttonEl, 'click');

Dodatkowo podczas tworzenia obiektu Observable można przekazać do niego funkcję zwrotną o nazwie subscriber:

  const observable = new Observable(subscriber => {
    subscriber.next('Hello RxJS!');
  });

Dzięki temu określamy jakie dane i kiedy zostaną wysłane przez obiekt Observable.

Observer

Obiekt Observable wysyła powiadomienia do obiektu nazwanego Observer. Taki obiekt po prostu nasłuchuje na ewentualne dane wysłane przez Observable.

Obiekt Observer to zestaw funkcji zwrotnych o takiej strukturze:

const observer = {
    next: value => console.log('next', value),
    error: error => console.log('error', error),
    complete: () => console.log('complete!')
};

Żeby nasłuchiwać, co zostało wysłane podpinamy się pod obiekt Observable za pomocą metody subscribe:

const observer = {
    next: value => console.log('next', value),
    error: error => console.log('error', error),
    complete: () => console.log('complete!')
};

const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('RxJS');
  subscriber.next('!');
});

observable.subscribe(observer);

Subscription

Jest to obiekt, który powstaje w wyniku podpięcia obiektu Observable z obiektem Observer za pomocą metody subscribe:

const observer = {
    next: value => console.log('next', value)
};

const observable = new Observable(subscriber => {
  subscriber.next('1');
  subscriber.next('2');
});

const subscription = observable.subscribe(observer);
subscription.unsubscribe();

Obiekt Subscription posiada metodę unsubscribe, której wywołanie powoduje odpięcie obiektu Observer od Observable, czyli nie będą przez danego obserwatora więcej dane nasłuchiwane.

Subject

Subject to także obiekt typu Observable, ale specjalnego rodzaju. Podczas gdy Observable pozwala na wysłanie danych do jednego obserwatora (Observer). Obiekt Subject daje możliwość wysłania danych do wielu obserwatorów podczas pojedynczego wywołania.

Przykład:

import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe((value) => console.log('Observer 1: ', value));
subject.subscribe((value) => console.log('Observer 2: ',value));

subject.next('Some data');

subject.subscribe((value) => console.log('Observer 3: ', value));

subject.next('Extra data');

Wynik:

Observer 1:  Some data
Observer 2:  Some data
Observer 1:  Extra data
Observer 2:  Extra data
Observer 3:  Extra data