Kategorie
Transkrypcje YouTube

4 zaawansowane operatory do Higher Order Stream贸w #RxJS

馃敶 Bez tych operator贸w nie mo偶esz m贸wi膰, 偶e znasz RxJS! W tej lekcji t艂umacz臋 jak dzia艂a: concatAll, concatMap, switchAll, switchMap, exhaustAll, exhaustMap, mergeAll, mergeMap. Troch臋聽tego jest, prawda? Wszystko pokazane na matrycy, kt贸r膮 tworzyli艣my w poprzednich odcinkach o RxJS. Zapraszam!

Kod do odcinka – Pull Reuqest:
https://github.com/lebrande/rxjs-higher-order-streams/pull/3

Nowa wersja RxJS 7

TLDR: Je艣li nie interesuje Ci臋 jak zmigrowa膰 z wersji 6 na 7, to przejd藕 do: Zaawansowane operatory do Higher Order Stream贸w.
Niedawno wyszed艂 RxJS w wersji 7, a my w naszym projekcie ca艂y czas mamy 6. Zatem pierwsz膮 rzecz膮 b臋dzie podbitka wersji. Pierwsza na my艣l przychodzi do g艂owy komenda 鈥榥pm update鈥, jest taka. Jednak tym sposobem mo偶esz podbi膰 wersj臋 minor i patch, czyli to co jest po kropkach.

Ja chc臋 jednak podbi膰 wersj臋 major z 6 na 7. Jak to zrobi膰? Najpro艣ciej jest moim zdaniem zainstalowa膰 rxjs jeszcze raz, ale ze wskazaniem konkretnej wersji po ma艂pce: npm i rxjs@7

Co nas zaskoczy w si贸demce?

Przejd藕my na stron臋 https://rxjs.dev/ zobaczmy raport o tym co si臋 zmieni艂o. Ju偶 na stronie g艂贸wnej otrzymuj臋 baner 'VERSION 7 RELEASED’.

Klikaj膮c w banner przechodz臋 do raportu. Szukam rzeczy kt贸re dotycz膮 tego czym si臋 zajmowali艣my lub b臋dziemy zajmowa膰 za chwil臋.
Jest 'map’ – tutaj zmienia si臋 co艣 w kontek艣cie this, ale my go nie u偶ywamy.
Jest te偶 'take’ i tutaj dostaj臋 informacj臋, 偶e take wyrzuci b艂膮d dla argument贸w ujemnych i NaN.
I to w zasadzie tyle je艣li chodzi o API. Nie ma 偶adnych zmian, kt贸re by nas dotyczy艂y. Mog臋 zatem spokojnie u偶y膰 wersji siedem.

Zaawansowane operatory do Higher Order Stream贸w

Przejdziemy teraz do kodu. Mam tutaj stan z poprzedniego odcinka, ale usun膮艂em wykomentowany kod. Dla porz膮dku.

mergeAll

Pierwszym operatorem jest u偶yty ju偶 mergeAll. Zwr贸膰 uwag臋 jak zachowuje si臋 matryca. Przy ka偶dym kolejnym klikni臋ciu wypuszczany jest nowy wiersz klock贸w. Jak szybko klikam, to powstaje taka fala. Zauwa偶, 偶e klocki generuj膮 si臋 niezale偶nie od siebie w ka偶dym wierszu.
M贸wi: zapraszam wszystkie grupy (wiersze) razem.

concatAll

Teraz chcia艂bym, aby ka偶dy kolejny wiersz, zaczyna艂 si臋 renderowa膰 dopiero, gdy jego poprzednik sko艅czy swoj膮 robot臋. Kolejne wiersze b臋d膮 czeka膰 na siebie. U偶yj臋 operatora concatAll. Emituje on z kolejnego strumienia dopiero, kiedy poprzedni strumie艅 (wiersz), si臋 zako艅czy. Wypuszcza kolejne wiersze po jednym. Zwr贸膰 te偶 uwag臋, 偶e wszystkie klikni臋cia, grzecznie stoj膮 w kolejce, s膮 zapami臋tywane przez strumie艅. Jak klikn臋 szybko 5 razy z rz臋du, to po pewnym czasie wyrenderuje si臋 5 wierszy. Od razu odnosz臋 wra偶enie, 偶e wszystko dzieje si臋 wolniej.
M贸wi: nie wszyscy na raz, prosz臋 pojedynczo, dla ka偶dego mam 7 minut (klock贸w). Mo偶esz to por贸wna膰 do sytuacji w kolejce do lekarza.

switchAll

W nast臋pnym przypadku chc臋 przyspieszy膰, ale nadal renderowa膰 po jednym wierszu. Kiedy klikn臋 drugi i ka偶dy kolejny raz, aktualny wiersz ma zosta膰 przerwany i zacz膮膰 si臋 nast臋pny. Doprowadzi to do sytuacji, 偶e niekt贸re wiersze b臋d膮 niepe艂ne. Taki stream b臋dzie ignorowa艂 pewne elementy. Jest to jeden z najbardziej przydatnych operator贸w w rxjs. Pozwala on na optymalizacj臋 aplikacji. Jest na tyle sprytny, 偶e je艣li u偶yjesz go z ajax, to 偶膮danie HTTP zostaje automatycznie anulowane!

exhaustAll

W naszej matrycy ci臋偶ko mi b臋dzie znale藕膰 opowie艣膰 dla operatora exhaustAll. Dlatego wyjd臋 od odniesienia do 偶膮da艅 HTTP. Je艣li wyobra偶臋 sobie, 偶e ka偶dy wiersz (klikni臋cie) to request do serwera, to powiem: niech wykona si臋 request do ko艅ca, ale w tym czasie ka偶dy kolejne klikni臋cie b臋dzie ignorowane w ca艂o艣ci. Je艣li klikn臋 szybko 5 razy, to wyrenderuje si臋 jeden wiersz do ko艅ca i koniec. Nast臋pnie klikam raz jeszcze i widz臋, 偶e 4 kolejne zosta艂y ca艂kowicie pomini臋te i pojawiaj膮 si臋 kolejne klocki w wierszu sz贸stym (y: 5).

Skr贸towe wersje wszystkich wymienionych operator贸w

Okazuje si臋, 偶e moja konstrukcja jest na tyle powszechna, 偶e jest dla niej skr贸t. Mo偶na po艂膮czy膰 ka偶dy z wymienionych wy偶ej operator贸w z operatorem map. Wystarczy podmieni膰 ko艅c贸wk臋 All na Map.
Zamiast:

const tiles$ = rows$.pipe(
  map((y) => columns$.pipe(
    map((x) => [x, y] as Coordinates),
  )),
  switchAll(),
);

Mog臋 skr贸ci膰 do:

const tiles$ = rows$.pipe(
  switchMap((y) => columns$.pipe(
    map((x) => [x, y] as Coordinates),
  )),
);

Oto lista wszystkich:
– mergeAll -> mergeMap
– concatAll -> concatMap
– switchAll -> switchMap
– exhaustAll -> exhaustMap