RxJS – pipe() wraz z map() i tap()

Od ostatniego posta minęło już trochę czasu, przepraszam za tą przerwę!

Dzisiaj chciałbym skupić się na pewnym elemencie który osobom uczącym się Angulara może sprawić trudność. Na potrzeby tego wpisu zakładam, drogi czytelniku, że zagadnienie subskrybowania się do obiektów typu Observable jest już Ci znane!

Często przy okazji subskrybowania się do typu Observable pojawiają się dodatkowe funkcje jak tytułowa pipe().

Przykład:

getHeroes(): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      tap(_ => this.log('fetched heroes'))
    );
}

Może nasunąć się pytanie, co ta funkcja .pipe() tak właściwie robi?

Na początku rozróżnijmy:

1. Pipe w Angularze odpowiedzialny jest za transformację danych wyświetlanych jako output.
2. Funkcja pipe() którą opisuje w dzisiejszym wpisie pochodzi z biblioteki RxJS i jest odpowiedzialna za możliwość implementacji pipowych operatorów.

Czyli np:

• map()
• tap()

Warto zauważyć, że mimo takich samych nazw jak JavaScriptowe funkcje, podane wyżej przykłady podchodzą z biblioteki RxJS, więc należy je właściwie zaimportować, np:

import { map } from 'rxjs/operators';

Tłumacząc na bardziej zrozumiały język, funkcja pipe() pozwala nam zastosować tzw. „pipe operators” za pomocą których możemy wpływać na dane i/lub wykonywać dodatkowe operacje przy okazji subskrypcji do typu Observable. Liczba stosowanych pipe operatorów zależy od naszych potrzeb. Należy jedynie pamiętać o oddzielaniu ich od siebie znakiem przecinka:

obs.pipe(
  op1(),
  op2(),
  op3(),
  op3(),
)

Przykłady zastosowania pipowych operatorów:

import { of } from 'rxjs';
import { tap, map } from 'rxjs/operators';

const source = of(1, 2, 3, 4, 5);
const example = source.pipe(
  tap(val => console.log(`Przed funkcją map(): ${val}`)),
  map(val => val + 10),
  tap(val => console.log(`Po funkcji map(): ${val}`))
);

//wyniki przed użyciem map(): 1...2...3...4...5
//wyniki po użyciu map(): 11...12...13...14...15
const subscribe = example.subscribe(val => console.log(val));

Zacznijmy od funkcji of() która sekwencyjnie emituje podane wartości a na zakończenie wysyła komunikat o zakończeniu operacji.

tap() służy tutaj do logowania wartości w naszym strumieniu. tap() nie zmienia wartości Observable i zwraca go w identycznej postaci.

map() działa na podobnej zasadzie jak map() znane z JavaScriptu (https://devdocs.io/javascript/global_objects/array/map). Za pośrednictwem tej funkcji możemy wpływać na wartość elementów w strumieniu danych, w tym wypadku dodajemy do każdego 10.

Jak widać używanie funkcji pipe() z operatorami bywa bardzo pomocne i warto wiedzieć jak je wykorzystać. Lista wszystkich pipowych operatorów jest dostępna np. tutaj.