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); }); } }