RxJS: Mastering the Operators

What are Operators?

Pure functions that transform information in the Observable stream.
Create a new Observable, often based on the current Observable.
Allow for complex asynchronous code to be easily composed in a declarative manner.
Methods of the Observable class.

Observable Generators

```
Rx.Observable.<operator>
```
Often create a new Observable without any input.

Instance Operators?

```
Rx.Observable.prototype.<operator>
```
The this scope is the input Observable.

Composable?

All operators return an Observable, making them chainable (or pipeable, but not lettable).
Subscribing to the output Observable will also subscribe to the input Observable.

Versions?

Stable release: 5.5.6
Alpha release: 6.0.0-alpha.3

Can I import all operators

Yes, but you likely do not need all of them.
Be kind to your users.

Import a single operator?

import from "rxjs/add/operators/switchMap";

import { switchMap } from "rxjs/operators";

How do I chain operators in v5.4.x?

class PostsComponent {

  private user: Observable<User>;

  ngOnInit() {
    this.posts = this.user
      .map(user => user.id)
      .switchMap(id => 
        this.postsService.getPosts(id)
      );
  }
}

How do I pipe operators in v5.5.x?

class PostsComponent {

  private user: Observable<User>;

  ngOnInit() {
    this.posts = this.user.pipe(
      map(user => user.id),
      switchMap(id => 
        this.postsService.getPosts(id)
      )
    );
  }
}

Ok, what about Angular?

Angular <3 Observables
Asynchronous tasks in Angular return an Observable.
The AsyncPipe is your friend.

How many?

75!

How do I choose?

Use the "Find the right operator" wizard at: http://reactivex.io/rxjs/
Marble diagrams.

Overview

Lazy-loaded modules
Angular Material
CoreModule for interceptors, models and services
StateModule with NgRX actions, effects and reducers
Stateful (smart) containers
Stateless (dumb) components

git checkout ngrx-refactor-2

cd server && yarn serve

cd client && ng serve

https://github.com/blove/ngrx-tour-of-heros

json-server

cd server

yarn serve

Let's dive in.

map()

One of top 5 operators in use
Data stream transformation operator
Akin to Array.prototype.map

map()

src/app/+powers/containers/power/power.component.ts

filter()

One of top 5 operators in use
Data stream filtration operator
Akin to Array.prototype.filter

filter()

src/app/+heroes/components/add-hero-dialog.component.ts

src/app/+powers/containers/power/power.component.ts

tap()/.do()

app/+powers/containers/edit/edit.component.ts

One of top 5 operators in use
Allows stream to be observed sideband
Can perform side effects with observed data
Does not modify the stream in any way
Can also observe error and complete
Useful for doing work that reacts to the stream but otherwise does not handle the stream

tap()/.do()

app/+powers/containers/edit/edit.component.ts

switchMap()

src/app/+heroes/containers/edit/edit.component.ts

One of top 5 operators in use
Another transformation operator
Switches from one stream to another
Unsubscribes from previous Observable
Subscribes to new Observable

src/app/state/powers/effects/powers.ts

switchMap()

One of top 5 operators in use
Another transformation operator
Switches from one stream to another
Unsubscribes from previous Observable
Subscribes to new Observable

catchError()/.catch()

app/state/powers/effects/powers.ts

first()

app/+powers/containers/edit/edit.component.ts

Returns the first value observed and completes stream
Another filtration operator
Allow a predicate to be used to filter for first desired value
Allows a selector to be used to transform returned value
Supports optional default value
Useful for once-and-done handlers

first()

app/+powers/containers/edit/edit.component.ts

last()

Returns the last value observed and completes stream
Another filtration operator
Allow a predicate to be used to filter for first desired value
Last will wait for completion from original stream before returning
Useful for once-and-done handlers

last()

take()

Returns the first N values observed and completes stream
Another filtration operator

take()

skip()

Skips the first N values observed then continues to emit any additional values
Another filtration operator
Often used with Replay and Behavior subjects to skip unwanted values
Synonymous with .filter((val, index) => index >= N)

skip()

startWith()

Emits specified value or values into the stream first
Continues emitting values from source observable
Accepts optional scheduler for scheduling emissions

startWith()

withLatestFrom()

Includes latest value from another Observable once both have emitted only when source emits
Provides both values (from source and other observables) in array argument
Can use project function to transform
Simplest way to join streams of data
.subscribe(([orig, latest]) => {...})

withLatestFrom()

src/app/+powers/containers/power/power.component.ts

distinctUntilChanged()

src/app/+heroes/components/add-hero-dialog.component.ts

Only emits distinct values from source
Cross between filtration and rate limiting operator
Allows comparator function to be used to determine uniqueness
Uses strict equality check by default if no comparator provided
Companions: distinct(), distinctUntilKeyChanged()

src/app/+powers/components/edit-power-dialog.component.ts

distinctUntilChanged()

src/app/+heroes/components/add-hero-dialog.component.ts

Only emits distinct values from source
Cross between filtration and rate limiting operator
Allows comparator function to be used to determine uniqueness
Uses strict equality check by default if no comparator provided
Companions: distinct(), distinctUntilKeyChanged()

src/app/+powers/components/edit-power-dialog.component.ts

debounceTime()

Only emits values once a given interval
Data stream rate limiting operator
Drops previous value if new value arrives before interval
Defaults to milliseconds
Allows scheduler to be supplied to configure what the dueTime is interpreted as (if you need other than milliseconds)