RxJS Top Ten - Code This, Not That

RxJS是Javascript 越多越受重視的函式庫，PeraPera團隊找到非常受歡迎的教學影片加了中文字幕，以下是影片大綱整理。

 https://www.perapera.ai/watch/youtube-ewcoEYS85Co 

RxJS是近來頗受歡迎的函式庫，在npm的每日下載量甚至高過三大前端框架React, Angular與Vue。原因在於JavaScript本身無法滿足處理多個非同步(Async)資料流(Streams of data)的需求，而RxJS函式庫能夠讓我們避開promise只允許單個Async數值的限制與「回呼地獄」（callback hell）。

非同步資料流包含讀取Firebase資料、DOM事件、WebSocket與檔案上傳等。

以下為RxJS的10個重要詞彙與用法介紹：

1. Observable

首先需要導入Observable，可以把Observable想像成是水管，與水源（資料）相接，接著以Subscribe與處理工具（運算子）串接。

Observable會在資料流變化時通知Subscriber，像是以監聽事件進行觀測，並能夠根據不同資料流入提供多個監聽事件分別處理。如果只想針對特定數值進行處理，可以使用’of’串接，但要避免與’from’搞混，’from’可用來處理陣列、promise與Iterable，並分別對每個項目進行處理。另外fromEvent能在每次事件觸發時進行通知、也能加上interval設定發送通知的間隔時間。

2. Hot VS Cold

簡單來說Hot Observable可以有多個Subscription，Cold Observable只能有一個Subscription。但其實可以使用shareReplay將Cold Observable的數值分給多個Subscriber，但這不是常用的實作方法。

3. Subjects

Subjects像是附有幫浦的hot Observable，能在獲取數值的同時建立新資料流或是驅動事件。Subjects有個陷阱需要留意，必須在獲取數值前先設立subscription才能對資料進行處理，否則會拿不到數值。而BehaviorSubject可以解決此問題，讓遲到的subscriber也都能獲取數值，對state management（狀態管理）很有幫助。（可參考閱讀本文）

4. Operator（運算子)

可用來控制Observable的資料流。影片介紹如何同時運用map, filter, scan等常見運算子，處理從pipe接出來的資料。

5. Tap

Tap能夠進到pipe內部對接到的資料流進行處理，例如影片前面部分都只在最後才callback 印出處理完的結果，若使用tap(print)則能印出pipe內不同位置資料處理前後的變化。如果是處理firebase傳回的資料，也可以tap搭配async await進行非同步處理。

6. Backpressure

當Observable發出的通知過多超出我們所需，就稱作Backpressure。有兩個RxJS運算子可以幫助解決Backpressure，第一個是防抖（debounce），可在事件觸發後持續等待一段時間才處理。另一個方式是節流（throttle），能夠在固定時間內，只處理第一個監聽到的事件。但如果不想過濾掉太多資料，並想要存取所有觸發事件，則可以使用buffered，它能建立陣列並搜集所有事件，並能設置陣列中達到多少項目時才發射。

7. Switchmap

可將一個Observable從中途切換到另一個，適合用在一個資料的取用需要根據前一項獲取資料才能決定的情境。以firebase 登入App為例，我們需要將Observable設置在觀測使用者的登入id後，才能回到資料庫查詢符合該id的相關資料。這時可以先用pipe連結使用者id，接著在內部使用switchMap，在獲取使用者id後才進到資料庫抓資料。

8. Combine

用於將多個Observable組合成單一資料流。可將多筆Observable資料彙集在一個陣列中，再加上delayed設置延遲時間，就能讓蒐集完的資料在同一時間回傳，如果不想設置延遲，則可以使用merge，每收到一筆資料就會回傳

9. Errors

在pipe內設置catchError就能除錯，而retry則能馬上對error進行處理，在http除錯時相當方便。

10. Memory Leaks

RxJS有兩個常用防止記憶體流失的方法，一個是unsubscribe，設置條件式並建立unsubscribe中止Observable回傳。另一個方法為takeWhile，能夠在pipe之後直接設立中止回傳的條件，不需要另外取消subscription。takeUntil則可設定在Observable取得特定回傳值時，中止與資料流的subscription。