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

Styczeń podsumowanie.

W styczniu opublikowałem: 5 wpisów:

Inne:

1. Zasada dwóch minut
2. Zasada grupowania zadań

JavaScript:

1. Jak iterować po obiekcie?

Webstorm:

1. Git jak zrobić cherry-pick?

Wrzuciłem jeden komiks:

1. Cookie policy

Przeczytałem cztery książki:

1. Błoto słodsze niż miód. Głosy komunistycznej Albanii - Małgorzata Rejmer
2. Tortilla Flat - John Steinbeck
3. Święto ognia - Jakub Małecki
4. Zabić drozda - Harper Lee

Przesłuchałem dwa audiobooki:

1. Billy Summers - Stephen King
2. Range: How Generalists Triumph in a Specialized World - David Epstein

Czy łapałeś się na tym, że w ciągu tygodnia robiłeś podobne zadania? Na przykład robienie przelewów? Odpisywanie na e-maile?

A co jeśli jesteś w stanie tak zaplanować swoje zadania, że będziesz dzielić je na grupy? W ten sposób masz grupę zadań i zajmujesz nią w określonym czasie.

Grupowanie zadań

Podczas planowania warto zastanowić się, czy jakieś zadania można połączyć w grupy. Dzięki temu jednego dnia możesz załatwić za jednym zamachem X zadań. Zamiast rozbijać je na kilka dni. Ja zasadę grupowania stosuję podczas robienia miesięcznych przelewów. Zbieram listę przelewów, jakie mam do zrobienia i po prostu wykonuję ja konkretnego dnia.

Taki sposób działania pozwala na zaoszczędzenie czasu. Może nie dużo, ale zawsze coś. Dodatkowo stajemy się lepiej zorganizowani.

Załóżmy, że mamy jakieś zmiany zapisane pod konkretnym commitem. I chcielibyśmy te zmiany przenieść do innego brancha.

Poniżej opisuję, w jaki sposób można zrobić to w Webstorm za pomocą GUI.

Jak zrobić cherry-pick?

Oto kroki:

1. Przejdź do brancha, do którego chcesz przenieść commita
2. Przejdź to do okienka Git — skrót: ALT + 9
3. Z listy z commitami wybierz ten, który chcesz dodać do brancha. Kliknij prawym przyciskiem na tym commicie i z menu wybierz opcję: Cherry-pick

Samo iterowanie po obiekcie jest dość proste. Możemy skorzystać z pętli for in:

const object = {
  foo: {
    label: 'Foo label',
    value: 1
  },
  bar: {
    label: 'Bar label',
    value: 2
  }
};

for (const key in object) {
  console.log(`key: ${key} value: `, object[key]);
}

Ale co, w przypadku gdybyśmy potrzebowali użyć funkcji operujących na tablicach? Jak na przykład: reduce lub map.

Iterowanie po obiekcie, jak po tablicy

Żeby iterować po obiekcie, jak po tablicy możemy skorzystać z metody: keys klasy Object. Przykład:

const object = {
  foo: {
    label: 'Foo label',
    value: 1
  },
  bar: {
    label: 'Bar label',
    value: 2
  }
};

const total = Object.keys(object).reduce((result, currentKey) => result + object[currentKey].value, 0);
console.log(`Total: ${total}`); // Total: 3

Metoda keys zwraca tablicę kluczy dla danego obiektu.

Jeśli nie zależy nam na dostępie do kluczy, możemy skorzystać z innej metody tej samej klasy: values. Przykład:

const object = {
  foo: {
    label: 'Foo label',
    value: 1
  },
  bar: {
    label: 'Bar label',
    value: 2
  }
};

const total = Object.values(object).reduce((result, current) => result + current.value, 0);
console.log(`Total: ${total}`); // Total: 3