Docker
Network
RxJS
Nginx
TypeScript
Data Structure And Algorithm
JavaScript
PostgreSQL
React
GitRxJS 學習筆記 - 介紹與 Stream 概念
什麼是 RxJS ( Reactive Extensions Library for JavaScript )
從 RxJS 的官方文件中的介紹:
RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array methods (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.
Think of RxJS as Lodash for events.
簡而言之，RxJS 提供了許多工具來幫助我們處理一連串的「非同步」的事件，而這邊所謂的一連串的「非同步」的事件，又被稱為 Stream (資料流/事件流)。
什麼是 Stream?
Stream vs Array
所謂的 stream 指的是資料在一條時間軸上的不同時間點被發送出來，而且 stream 可能永無止盡的繼續下去，我們也可以把 stream 想像成一條帶有許多種類產品的輸送帶，隨著時間的推進，產品也一個接著一個的被輸送帶送到目的地;
若拿 stream 與 array 比較的話，array 在被定義的時候就已經知道它的容貌，比如陣列的長度(length)，以及第 n 個次序的值為何，然而對於 Observable 所發出的 stream 而言，stream 上的資料可能會在不同時間點被發送出來，也難以掌握發出來的資料長什麼模樣，因此在 Reactive Programming 的世界裡，由於 stream 的形式相比於 array 而言多了「時間」的變數，因此在處理 stream 的思維也與 array 不一樣。
我們可以把 stream 想像成在吃迴轉壽司的情境，壽司在輸送帶上面被傳送，但是我們難以全權掌握接下來的幾秒鐘印入眼簾的內容有拿些，可能是鮭魚壽司、鮪魚壽司，又或者是濕紙巾、芥末醬等等...。
因此，處理 stream 主要是在針對其所發出的資料作出回應 (react)，因為我們無從得知 stream 丟出來的資料長什麼模樣，或是什麼時間點會發出，因此必須透過程式碼來對所發出來的資料作出回應，這樣的處理方式被稱為 Reactive Programming (響應式程式設計)，而 Observables 的概念也是基於 Reactive Programming 所衍伸出來的。
瀏覽器上面的各種 Element 事件也可以作為 stream 的來源，比如我們在網頁瀏覽新聞時，透過滾輪來進行頁面的滑動，此時我們可以將元素的 scroll 事件監聽器透過 Observable 進行包裝並 Subscribe，隨著滾輪的滑動，滑動的事件也會被 Observable 發送出來。
又或者將 input 的 click 事件監聽器透過 Observable 包裝後並 Subscribe，當使用者在輸入的過程中，其值也會透過 Observable 發送出來，也可以將 HTTP Request 加入 Observable 之中，並觀察所發送回來的 HTTP Response。