RxJS 筆記

http://mp.weixin.qq.com/s?__biz=MzI5MDM2NjY5Nw==&mid=2247483759&idx=1&sn=5b288a35fbe3300e157d4c0cc924bdf6&c

爲何使用RxJS?

RxJS 將來2~3年是一個很火的一套 Library。

• Reactive Programming 的興起
• Observable 標準化
• 多語言的支持

Reactive Programming 是 RxJS 最重要的核心觀念之一。

認識RxJS

Functional Programming(函數式編程) 是 Rx最重要的觀念之一

Functional Programming 是一種編程規範。

簡單來講，Functional Programming 核心思想就是作運算處理。並用function來思考問題

能夠寫成：

咱們把每一個運算包成一個個不一樣的function，並用這些function 組合出咱們要的結果，這就是最簡單的Functional Programming。

RxJS 能夠很好解決異步和事件組合的問題。

RxJS中解決異步事件管理的基本概念以下：

• Observable可觀察對象：表示一個可調用的將來值或者事件的集合。
• Observer觀察者：一個回調函數集合,它知道怎樣去監聽被Observable發送的值
• Subscription訂閱： 表示一個可觀察對象的執行，主要用於取消執行。
• Operators操做符： 純粹的函數，使得以函數編程的方式處理集合好比:map,filter,contact,flatmap。
• Subject(主題)：等同於一個事件驅動器，是將一個值或者事件廣播到多個觀察者的惟一途徑。
• Schedulers(調度者)： 用來控制併發，當計算髮生的時候容許咱們協調，好比setTimeout,requestAnimationFrame。

• 事件流

  理解Rx的關鍵是要把任何變化想象成事件流。

• 常見建立類操做符

  • from： 能夠把數組、Promise、以及Interable轉化爲 Observable
  • fromEvent:能夠把事件轉化爲 Observable
  • of ：接收一系列的數據，並把它們 emit出去

• 常見轉換操做符

  • map
  • mapTo
  • pluck

【總結】：

根據不一樣業務需求（即任何變化-->想象成任什麼時候間維度的事件流），經過不一樣的運算符，把不一樣的事件流流合併、轉換成相應的結果(最終的需求業務邏輯)。最重要的一點，他們是自動把數據推送給你，不像傳統那樣須要你去請求，拉取數據。

理解RxJS

操做 Rx提供了許多接口

• 建立

• 轉變

   

• 過濾

• 組合

• 錯誤處理

小結：

各種寶珠圖：http://rxmarbles.com/

1)常見建立類操做符

from： 能夠把數組、Promise、以及Interable轉化爲 Observable

fromEvent: 能夠把事件轉化爲 Observable

of ： 接收一系列的數據，並把它們 emit出去

2)常見轉換操做符: map、mapTo、pluck

map的寶珠圖（map是核心主要）

mapTo:(map的延伸擴展)

pluck:(map的延伸擴展)

3)Observable 的性質

三種狀態：next、error、complete

特殊的：永不結束，Never，Empty（結束但不發射），Throw

• 常見工具類操做符：do

• 常見變換類操做符：scan 和 常見數學類操做符：reduce （用的比較頻繁）

• 過濾類操做符：filter，take，first/last，skip...

• 兩個常見的建立類操做符：Interval，Timer

4)過濾類操做符：Debounce,distinct,distinctUntilChanged

 

5)合併類操做符：merge、concat、startWith

6)合併類操做符：CombineLatest、withLatestFrom、zip

區別： zip有對齊的特性，withLatestFrom是以源事件流爲基準  

高階操做符： '拍扁'的做用

RxJS 可視化工具推薦

RxJS 是前端目前爲止響應式編程的最佳實踐。很不幸的是咱們已經用傳統方式開發不少年了，「evething is stream」 的思想對咱們來講再也不是順其天然，甚至會有一點蹩腳，尤爲是初入 RxJS 的坑。畢竟，有個偉人說過，‘工欲善其事必先利其器’，不是嗎？所以，咱們給你們推薦三款可視化的神器，幫助你們對 RxJS 進行感性地瞭解。

RxViz

這款可視化工具是由 facebook 的 Misha Moroshko 開發。RxViz 能夠簡潔的可視化給定的 Observable. 你提供的 RxJS 代碼會被執行，若是最後一個表達式是 Observable， 一個帶着動畫的可視化會出如今眼前。同時，你能夠經過修改時間窗口來控制動畫的速率，也能夠將可視化 svg 複製下來用於你想用的地方，你一樣能夠將可視化分享給其餘人。

詳見https://github.com/moroshko/rxviz

RxVision

推薦這款 RxVision 可視化的工具時，個人心裏是糾結的。我的來說，我很是喜歡它，可是，尷尬的是做者已經不維護了，擦。可是，它還有一個不得不推薦的理由。請容我慢慢道來。

相信這篇文章是全部前端響應式的殿堂級入門文章，中文也有人翻譯再加工過。文章中的例子，也是經典，詳細闡述瞭如何用「響應式」的思想構建業務邏輯.

詳見https://github.com/jaredly/rxvision

RxMarbles

這個庫不得不推薦啊，這是響應式大神 staltz 的做品。和前面庫最大的不一樣是, Observable 的每一個 item 是可交互的，你能夠拖拽，而後整個 Observable 都會作出相應的改變。

詳見https://github.com/staltz/rxmarbles

ASCII字符來繪製圖表：一切都是流

每個流都擁有一系列方法，例如map、filter、scan等 

中文教程：http://cn.rx.js.org/manual/tutorial.html

使用 Ngrx

• @ngrx/store

npm install @ngrx/store --save OR yarn add @ngrx/store

• @ngrx/effects

npm install @ngrx/effects --save OR yarn add @ngrx/effects

監聽@ngrx/store發送的動做(即：actions dispatched)

Effects 主要是一個注入服務的類(injectable service classes)

使用EffectsModule.forRoot 

使用EffectsModule.forFeature 

• API 文檔

  • EffectsModule.forRoots( ) 註冊到根模塊下

      @NgModule({
        imports: [
          EffectsModule.forRoot([ FirstEffectsClass, SecondEffectsClass, ]) ] }) export class AppModule { }

  • EffectsModule.forFeature( ) 註冊到任意ng模塊下

    @NgModule({
      imports: [
        EffectsModule.forFeature([ SomeEffectsClass, AnotherEffectsClass, ]) ] }) export class FeatureModule { }

  • Actions

  import { Injectable } from '@angular/core'; import { Actions } from '@ngrx/effects'; @Injectable() export class SomeEffectsClass { constructor(private actions$: Actions) {} }

  • ofType 篩選動做流類型

    import { Injectable } from '@angular/core'; import { Actions, Effect, ofType } from '@ngrx/effects'; import { tap } from 'rxjs/operators'; @Injectable() export class SomeEffectsClass { constructor(private actions$: Actions) {} @Effect() authActions$ = this.action$.pipe( ofType<LoginAction | LogoutAction>('LOGIN', 'LOGOUT'), tap(action => console.log(action)) ); }

• Non-dispatching Effects { dispatch: false }

import { Injectable } from '@angular/core'; import { Actions, Effect, ofType } from '@ngrx/effects'; import { tap } from 'rxjs/operators'; @Injectable() export class SomeEffectsClass { constructor(private actions$: Actions) { } @Effect({ dispatch: false }) logActions$ = this.actions$.pipe( tap(action => console.log(action)) ); }

• Controlling Effects
  • OnRunEffects

import { Injectable } from '@angular/core'; import { Actions, Effect, OnRunEffects, EffectNotification, ofType } from '@ngrx/effects'; import { Action } from '@ngrx/store'; import { Observable } from 'rxjs/Observable'; import { exhaustMap, takeUntil, tap } from 'rxjs/operators'; @Injectable() export class UserEffects implements OnRunEffects { constructor(private actions$: Actions) {} @Effect() updateUser$: Observable<Action> = this.actions$.pipe( ofType('UPDATE_USER'), tap(action => { console.log(action); }) ); ngrxOnRunEffects(resolvedEffects$: Observable<EffectNotification>) { return this.actions$.pipe( ofType('LOGGED_IN'), exhaustMap(() => resolvedEffects$.pipe( takeUntil(this.actions$.pipe(ofType('LOGGED_OUT'))) ) ); } }

• 工具
  • mergeEffects 合併全部的Effects

import { mergeEffects } from '@ngrx/effects'; export class MyService { constructor(effects: SomeEffectsClass) { mergeEffects(effects).subscribe(result => { console.log(result); }); } }