Najpopularniejszą biblioteką wykorzystywaną wraz z frameworkiem Angular do programowania reaktywnego jest RxJS, która przedstawia siebie na oficjalnej stronie w następujący sposób:

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

https://rxjs.dev/

Subskrybując typ Observable podłączamy się do źródła danych, dzięki czemu ustawiony przez nas handler wywoła się za każdym razem gdy zostanie wyemitowana nowa wartość. Ponieważ subskrypcja domyślnie nie ma ustalonej ’daty ważności’, musimy zadbać o jej zakończenie w odpowiednim momencie, aby nie doprowadzić do wycieków pamięci. Przyjrzyjmy się kilku pomysłom, w jaki sposób możemy zakończyć subskrypcję.

takeWhile()

source$
  .pipe(
    map(data => // get data),
    takeWhile(data => !data)
  )
  .subscribe();

Subskrypcja jest aktywna do momentu, póki data jest pusta (a dokładniej, jest null, NaN, 0, pustym stringiem lub undefined).

source$
  .pipe(
    takeWhile(val => val <= 4)
  )
  .subscribe();

Subskrypcja działa tak długo, jak otrzymywane wartości ze strumienia są mniejsze lub równe 4.

first()

source$
  .pipe(
    first()
  )
  .subscribe();

Subskrypcja kończy się po otrzymaniu pierwszej wartości.

Więcej operatorów filtrujących odnajdziesz w oficjalnej dokumentacji RxJS.

Implement decorator function

Sposobem na ominięcie konieczności wywoływania unsubscribe dla każdej subskrypcji w klasie jest implementacja dekoratora.

export const AutoUnsubscribe = (constructor: Function) => {
  const original = constructor.prototype.ngOnDestroy;

  if (typeof original !== 'function') {
    throw new Error(
      `${constructor.name} is using @AutoUnsubscribe but does not implement ngOnDestroy`
    );
  }

  constructor.prototype.ngOnDestroy = function() {
    for (const prop in this) {
      if (typeof this[prop]?.unsubscribe === 'function') {
        this[prop].unsubscribe();
      }
    }
    original.apply(this, arguments);
  };
};

Wykorzystanie:
Musimy dodać @AutoUnsubscribe() przed klasą naszego komponentu, obecne musi być także ngOnDestroy().

@AutoUnsubscribe()
@Component(...)
export class MyComponent implements OnDestroy, OnInit {
  protected subscription: Subscription;

  ngOnInit() {
    this.subscription = ...
  }  
  ngOnDestroy() {}}

Kiedy subskrypcja kończy się automatycznie?

Subskrypcja kończy się automatycznie, gdy Observable wysyła powiadomienie OnError lub OnComplete do swoich obserwatorów.

Umiejętność posługiwania się RxJS to must have przy rozwijaniu aplikacji opartych na Angularze, niech ten artykuł będzie motywacją dla każdego do dalszego pogłębiania wiedzy o programowaniu reaktywnym.