ReactiveX介紹

4 mins.
  1. 1. Observable
    1. 1.1. Operator
  2. 2. Subject
  3. 3. 總結
  4. 4. Reference

今天要來探討ReactiveX(底下簡稱Rx),這個已經紅很久的概念,各語言有各自的實作ex:RxJS、RxJava…
我們先來看看Rx是什麼東西,官方給了一個定義
composing asynchronous and event-based programs by using observable sequences

以下範例都將以RxJS為主

從上面的範例中可以看到Rx將事件或是資料的處理方式統一了作法
將陣列的資料拆開,然後跟事件一樣一筆一筆的發送出去event-based、sequence

從這邊我們也看到範例中,有Observable、subscribe這兩個東西,到底是什麼

Observable

我們用個例子來解釋一下…
今天到了一間無菜單料理的餐廳,你坐下來後,服務生就開始陸續的把菜送上來
套回Rx上面,Subscribe也就是身為客戶的你,餐廳的廚房就是Observable,廚師變化料理也就是Operator

請忽視價格問題:)

從這個例子能看到一件事情,其實很重要,也就是當沒有客人(Subscribe)來,廚房(Observable)是不會動作的

還是要回歸正提XDD,Rx提供了多種產生的方式,這邊列舉幾個常用的

  • create
    產生Observable,可以自行控制資料

    其實不常用

透過next不斷的發送資料出去,當要讓subscribe知道已經結束則使用complete
若是錯誤則是使用throw
complete、throw對於observable來說都是結束的意思,後面的動作就不會繼續觸發了

  • of
    輸出陣列資料

  • from
    將陣列資料拆解,sequence的將資料拋出

  • fromEvent
    監聽事件

Operator

Operator就像是煮飯一樣,搭配的好就像是阿基師,搭配不好吃起來就會…(遠目
Rx已經準備好許多的配料,可以讓我們自行搭配,底下用幾個來做範例吧

  • map

  • filter

  • concat

  • merge

  • mergeMap
    等於merge+map的合體技

看完了上面的介紹,也許有人就會開始想說,那可不可以有多個訂閱者
那多個訂閱者收到的資料會是什麼

答案是全部的人收到一模一樣的資料

那這樣一定會有人說,我只想要從訂閱之後的資料就好,我不想要全部的資料
subject粉墨登場~~

Subject

subject是繼承Observable,同時擁有Observable以及Observer兩個特性,並且記錄了狀態,不再每次從頭收到,而是從subscribe之後的值

有時候會需要subscribe時就拿到值,這時候可以用BehaviorSubject

或者是需要拿到最後幾次的輸出,可以使用ReplaySubject

總結

Rx是透過Observable實作的一套Library,但他有兩個我認為很重要的特點

  1. 沒有subscribe就沒有執行(沒有買賣就沒有傷害…XDD)
    其他很多程式都是一開始就先執行,如果後面有callback就做,沒有就結束
  2. 透過functional programming把每個動作獨立,讓程式閱讀性變高

Operator可以寫的很漂亮也可以寫的很可怕,只能透過練習拆解去學習,才會知道要怎麼用才是適合的

當然還有其他更強大的應用,但我目前都沒有用到,所以只能感受到這樣
歡迎大家一起來討論!

Reference

官網
Jerry-30 天精通 RxJS
RxMarbles
RxJS API Document