RxJS Operators - Real World Use Cases (FULL VERSION)

OPERATORS YOU ACTUALLY CARE
ABOUT EXPLAINED FOR REAL WORLD
USE CASES
OPERATORS IN RXJS

TRACY LEE
@ladyleet
Lead, This Dot Labs, JS consulting (Angular, React, Vue, Node, Polymer)
RxJS Core Team
Google Developer Expert, Angular
Microsoft MVP
Community Rel, Node.js @ OpenJS Foundation
Women Techmakers, GDG Silicon Valley & Triangle
Modern Web Podcast

@ladyleet
THE ANATOMY OF AN OPERATOR

“operators” in Observables
import { of as observableOf } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const src = observableOf(1, 2, 3, 4, 5, 6, 7);
src.pipe(
filter(x => x % 2 === 0),
map(x => x + x),
).subscribe(x => console.log(x)); // 4...8...12...

A simple map operator implementation
import { Observable } from 'rxjs';
export function map(fn) {
return (source) => new Observable(observer => {
return source.subscribe({
next(value) { observer.next(fn(value)); },
error(err) { observer.error(err); },
complete() { observer.complete(); },
});
});
}

Takes an observable & returns a new one
});
});
}

Subscribes to the source
});
});
}

Passes along the transformed value
});
});
}

And sending along the other signals
});
});
}

@ladyleet
● Flattening Operators
● Error Handling
● Completion Operators
● Subjects & Multicasting
There are 60+ operators in RxJS

map
ﬁlter
scan
THE EASIEST
OPERATORS

Deep Dive
Podcast
EXPLANATION -
Most common operator in apps.
Simply meant for transforming data.
PRIMARY USES -
Used when a stream of data isn’t the right shape and you want to
change it to another shape.
map
https://rxjs.dev/api/operators/map

: number
output$:
map
77
M
input$: 42
f
68
D
83
S
: boolean
map(fn)
fn:
fn fn fn fn
v => (v < 65 || v > 91) ? false : String.fromCharCode(v)
: string

map example
// RxJS v6+
// Map every click to the clientX position of that click
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(map(ev => ev.clientX));
positions.subscribe(x => console.log(x));

Deep Dive
Podcast
COMMON MISTAKES - Over engineering!
When you have an array and wrap it in an observable just to use
simple operators like map, reduce, or ﬁlter, you might be
overthinking it.
In this case it’d be better to use the native array’s map, reduce, and
ﬁlter methods.
map

output$:
filter
1input$: 2
2
3 4
4
filter(fn)
fn: v => v % 2
fn fn fn fn

ﬁlter example
// RxJS v6+
//Emit only click events whose target was a DIV element
import { filter } from 'rxjs/operators';
const clicksOnDivs = clicks.pipe(filter(ev =>
ev.target.tagName === 'DIV'));
clicksOnDivs.subscribe(x => console.log(x));

Deep Dive
Podcast
COMMON MISTAKES -
Using filter instead of the take or first operators.
Use first if you want to take the first value from an observable or
the first value that matches a specific criteria.
Use take if you’re looking to take the first n values.
filter
https://rxjs.dev/api/operators/filter

Deep Dive
Podcast
EXPLANATION -
Applies a reducer function over the source Observable, and
returns each intermediate result, with an optional seed value.
PRIMARY USES -
Managing state in a stream. No ngrx! You can use scan to create a
redux pattern.
scan
https://rxjs.dev/api/operators/scan

scan
fn: (state , v) => state + v
input$:
output$:
scan(fn,0)
fn fn
1 2
1 3
fn fn
3 4
6 10
1 30 6 10

scan example
// RxJS v6+ - Count the number of click events
import { scan, mapTo } from 'rxjs/operators';
const ones = clicks.pipe(mapTo(1));
const seed = 0;
const count = ones.pipe(scan((acc, one) => acc + one,
seed));
count.subscribe(x => console.log(x));

Deep Dive
Podcast
COMMON MISTAKES -
Emitting the same reference multiple times, which can cause
problems.
What you should do instead is treat your accumulated value as
immutable.
scan
https://rxjs.dev/api/operators/scan

FLATTENING
OPERATORS
switchMap
concatMap
mergeMap
exhaustMap

Deep Dive
Podcast
EXPLANATION -
● Maps a value to a new observable,
● subscribes to that observable,
● unsubscribes from the previous observable it was subscribed
to.
(switchMap only subscribes to one observable at a time)
switchMap
https://rxjs.dev/api/operators/switchMap

switchMap
i$:
input$:
output$:
switchMap(fn)
fn: (v) => interval(1000).pipe(take(2))
a
i1$:
i2$:
b
A B
A
B
fn
fn
U
B
B

switchMap example
// RxJS v6+ - Restart interval every 5 seconds
import { timer, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';
const source = timer(0, 5000);
const example = source.pipe(switchMap(( ) =>
interval(500)));
const subscribe = example.subscribe(val =>
console.log(val));

Deep Dive
Podcast
PRIMARY USES -
Commonly used for HTTP GET.
Great for autocompletes
Toggling between two streams
Great for animation!
switchMap

Deep Dive
Podcast
COMMON MISTAKES -
If you’re doing an HTTP POST or DELETE and a value is coming back in
the response.
If you’re relying on response from POST or DELETE in order to update
the UI, you’re only going to get response from 2nd request, and not 1st.
In these situations, use concatMap instead.
switchMap

Deep Dive
Podcast
EXPLANATION -
Most common operator for HTTP requests.
Ensures everything happens in the order it arrived.
Takes a value from the source, maps it into a new observable, and
only runs one observable at a time until it completes. Then moves
on to the next value in the buffer.
concatMap
https://rxjs.dev/api/operators/concatMap

concatMap
i$:
input$:
output$:
concatMap(fn)
a
i1$:
i2$:
b
A A B B
A A
B B
fn
fn

// RxJS v6+
import { of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { concatMap } from 'rxjs/operators';
// Emit 'ladyleet' and 'benlesh'
const source = of('ladyleet', 'benlesh');
// Map value from source into inner observable
// when complete emit result and move to next
const example = source.pipe(concatMap(username =>
ajax.getJSON(`https://api.github.com/users/${username}`));
example.subscribe(data => console.log(data));
concatMap example

Deep Dive
Podcast
COMMON MISTAKES -
Every single time you use concatMap, you have to make sure the observable
ends.
Never use concatMap for toggling or endless streams.
If the stream never completes, every subsequent concatMap is just going to
build up the buffer, and the other observables it’s buffering will never run.
concatMap
https://rxjs.dev/api/operators/concatMap

Deep Dive
Podcast
EXPLANATION -
Takes every single value, maps it into an observable, and
subscribes to it.
Then, it outputs whatever is coming from those inner observables
as a single stream of values.
mergeMap
https://rxjs.dev/api/operators/mergeMap

Deep Dive
Podcast
PRIMARY USES -
Sending requests to get as many responses as fast as possible when you don’t
care about the response order.
Errors from requests: mergeMap is more useful than switchMap if you want to
know what errors come back from requests and be able to handle them.
(With switchMap, the subscription would be cancelled before the error comes
back)
mergeMap

i$:
input$:
output$:
mergeMap(fn)
a
i1$:
i2$:
b
A AB B
A A
B B
fn
fn
A B
A
B
mergeMap

// RxJS v6+
import { of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { mergeMap } from 'rxjs/operators';
// Emit 'ladyleet' and 'benlesh'
const source = of('ladyleet', 'benlesh');
// Map value from source into inner observable
// when complete emit result and move to next
const example = source.pipe(mergeMap(username =>
ajax.getJSON(`https://api.github.com/users/${username}`));
example.subscribe(data => console.log(data));
mergeMap example

Deep Dive
Podcast
COMMON MISTAKES -
Using mergeMap to map to HTTP requests.
You don’t know how long a server will take to respond, and if one
request is slow and another is fast, it will end up out of order.
(If you don’t care about order, you can use it)
mergeMap

Deep Dive
Podcast
EXPLANATION - Conceptually, exhaustMap is the opposite of
switchMap.
Every time a value arrives, if you’re not already subscribed to a
previously mapped-to observable, exhaustMap will map it into an
observable and subscribe to that.
It will wait for the inner observable to complete or “exhaust” itself
before it allows any more new source values to be mapped into a new
inner observable.
exhaustMap
https://rxjs.dev/api/operators/exhaustMap

Deep Dive
Podcast
EXAMPLE USES -
Great for preventing double submissions.
Making sure touch drag features work properly.
exhaustMap
https://rxjs.dev/api/operators/exhaustMap

exhaustMap
i$:
input$:
output$:
exhaustMap(fn)
a
i1$:
i2$:
b
A A C C
A A
C C
c
fn
fn

// Run a finite timer for each click, only if there is no
currently active timer
import { fromEvent, interval } from 'rxjs';
import { exhaustMap, take } from 'rxjs/operators';
const result = clicks.pipe(
exhaustMap(ev => interval(1000).pipe(take(5)))
);
result.subscribe(x => console.log(x));
exhaustMap example

ERROR
HANDLING
catchError
retry
retryWhen

Deep Dive
Podcast
EXPLANATION -
Prevents errors from traveling down the entire chain.
Catches errors on the Observable to be handled by returning a
new Observable or throwing an error.
When it gets an error, it maps that error into a new Observable
and replaces the original source observable with the new one.
catchError
https://rxjs.dev/api/operators/catchError

output$:
catchError
input$:
catchError(fn)
3 fn (e:any) => EMPTYn:
fn

Deep Dive
Podcast
PRIMARY USES -
Handling errors from observables by mapping them to new
observable.
Preventing HTTP errors from killing the entire observable chain.
catchError
https://rxjs.dev/api/operators/catchError

// A stream of "load button" clicks
const loadData = fromEvent(button, 'click');
// When we click "load", trigger an http get
loadData.pipe(
concatMap(() => ajax.get('/this/will/404').pipe(
catchError(err => {
// side effect, to log something happened
console.log('An error occurred loading your
stuff!');
// Return a different observable
return of({ message: 'We noticed an error' });
})
))
).subscribe(x => console.log(x));
catchError example

Deep Dive
Podcast
EXPLANATION -
If your observable errors, it will resubscribe to that observable a
speciﬁed number of times.
retry
https://rxjs.dev/api/operators/retry

Deep Dive
Podcast
PRIMARY USES -
Great in the case of an HTTP request or websocket stream where
there is network ﬂakiness.
When it gets an error signal, it resubscribes to the original source.
retry

output$:
retry
input$:
retry(n)
1 uR Unsubscribes and recycles observablen:
uR

// RxJS v6+ - Retry 2 times on error
import { interval, of, throwError } from
'rxjs';
import { mergeMap, retry } from
'rxjs/operators';
const source = interval(1000);
const example = source.pipe(
mergeMap(val => {
//throw error for demonstration
if (val > 5) {
return throwError('Error!');
}
return of(val);
}),
retry example
//retry 2 times on error
retry(2)
);
const subscribe = example.subscribe({
next: val => console.log(val),
error: val => console.log(`${val}:
Retried 2 times then quit!`)
});

Deep Dive
Podcast
COMMON MISTAKES -
Using retry without an argument.
Using retry on hot observables.
(If you’re using a Subject or stateful observable, it’s not going to
reset the state of that observable, just resubscribe to it)
retry

catchError
retry
retryWhen
ERROR
HANDLING

Deep Dive
Podcast
EXPLANATION -
Gives you more control than retry.
Gives you an observable of errors that you can map into an
observable of notiﬁcations of when you want to retry.
retryWhen
https://rxjs.dev/api/operators/retryWhen

Deep Dive
Podcast
PRIMARY USES -
Using retry with a delay i.e incremental step back on network
failure
(if you send a network request and it fails - wait 2 seconds, try
again, if it fails, wait 4 and try, then 8 and try, etc.)
retryWhen
https://rxjs.dev/api/operators/retryWhen

output$:
retryWhen
input$:
retryWhen(fn)
1 fn (errors$) => errors$.pipe(switchMap(e => e.message === ‘X’ ? throwError(e) : of(1)))n:
fn
fn

// RxJS v6+ - Trigger retry after specified
duration
import { timer, interval } from 'rxjs';
import { map, tap, retryWhen, delayWhen }
from 'rxjs/operators';
//emit value every 1s
const example = source.pipe(
map(val => {
if (val > 5) {
//error will be picked up by retryWhen
throw val;
}
return val;
}),
retryWhen example
retryWhen(errors =>
errors.pipe(
//log error message
tap(val => console.log(`Value
${val} was too high!`)),
//restart in 6 seconds
delayWhen(val => timer(val * 1000))
)));
const subscribe = example.subscribe(val
=> console.log(val));

COMPLETION
OPERATORS
take
takeUntil
takeWhile
ﬁrst

Deep Dive
Podcast
EXPLANATION -
Takes the first specified number of values.
PRIMARY USES -
If you want to take the first n values from the source observable.
take
https://rxjs.dev/api/operators/take

output$:
take
input$:
take(n) fn
3 fn (v) => v < nn:
fn fn fn

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
const intervalCount = interval(1000);
const takeFive = intervalCount.pipe(take(5));
takeFive.subscribe(x => console.log(x));
take example

Deep Dive
Podcast
EXPLANATION -
Using a notiﬁer observable to tell a source observable to
complete.
PRIMARY USES -
Declarative subscription management
takeUntil
https://rxjs.dev/api/operators/takeUntil

output$:
takeUntil
input$:
takeUntil(t$)
fromEvent(document.body, ‘click’)t$:
t$:
U

import { fromEvent, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
const result = source.pipe(takeUntil(clicks));
takeUntil example

Deep Dive
Podcast
COMMON MISTAKES -
Providing the source observable with a notiﬁer that never emits or
completes.
https://rxjs.dev/api/operators/takeUntil
takeUntil

Deep Dive
Podcast
EXPLANATION -
Emits values emitted by the source observable so long as each
value satisﬁes the given predicate…
and then completes as soon as this predicate is not satisﬁed.
takeWhile
https://rxjs.dev/api/operators/takeWhile

import { takeWhile } from 'rxjs/operators';
const result = clicks.pipe(takeWhile(ev => ev.clientX >
200));
takeWhile example

import { takeWhile } from 'rxjs/operators';
const result = clicks.pipe(takeWhile(ev => ev.clientX >
200, true));
takeWhile’s new feature (inclusive)

Deep Dive
Podcast
PRIMARY USES -
Limit for mouse movements
Progress bars
COMMON MISTAKES - Not realizing that takeWhile has to wait for a
value to arrive before it completes and using it when you actually
wanted the observable to complete after an external event.
In this scenario you should have used takeUntil.
takeWhile
https://rxjs.dev/api/operators/takeWhile

Deep Dive
Podcast
EXPLANATION - Emits only the first value (or the first value that meets
some condition) emitted by the source Observable, or a default value.
If no default value is provided, it will error if it does not get a first value.
PRIMARY USES -
Used when you want to get the very next value from a websocket or
from an update interval.
first
https://rxjs.dev/api/operators/first

output$:
first
input$:
first(fn)
fn (v) => v < 3
2
2
fn fn

import { first } from 'rxjs/operators';
const result = clicks.pipe(first(ev => ev.target.tagName
=== 'DIV'));
ﬁrst example

Deep Dive
Podcast
COMMON MISTAKES -
Not realizing that first will error if it never finds a first value, and does
not have a default value.
(In this case, you probably wanted a filter and a take)
https://rxjs.dev/api/operators/first
first

SUBJECTS AND
MULTICASTING
Subject
BehaviorSubject
ReplaySubject
share
shareReplay

Deep Dive
Podcast
EXPLANATION -
A Subject is an observable that is also an observer.
PRIMARY USES -
Multicasting is the main use case for Subject.
Getting an observable out of user events ie button clicks.
Subject
https://rxjs.dev/api/index/class/Subject

Subject
output1$:
s1$:
n n
1
1 2
s1$: new Subject()
c
n next(v) c complete()
output2$: 2
2
S
S

Deep Dive
Podcast
COMMON MISTAKES - You should not just use Subject because
you don’t understand how to create an observable.
With Subjects, you do not get guaranteed teardown and memory
management that you would get with Observable.
After a Subject has errored or completed, it’s no longer usable.
https://rxjs.dev/api/index/class/Subject
Subject

Deep Dive
Podcast
EXPLANATION -
A variant of Subject that requires an initial value and emits its
current value whenever it is subscribed to.
PRIMARY USES -
When you don’t want a user or system to wait to get the next
value.
BehaviorSubject
https://rxjs.dev/api/index/class/BehaviorSubject

BehaviorSubject
output1$:
s1$:
n n
1 2
s1$: new BehaviorSubject(0) n next(v)
output2$: 2
2
0
0
1
2
S
S
1
1
Last value cache
n n
3
3
3
3
4
4
4
4
BehaviorSubject(n
)

Deep Dive
Podcast
DOCS EXPLANATION - Variant of Subject that "replays" old values to new
subscribers.
Buffers a speciﬁed count of values for a speciﬁed amount of time and emits
those values immediately to any new subscribers (in addition to emitting new
values to existing subscribers).
PRIMARY USES - What shareReplay uses under the hood. Typically do not
want to use this raw.
Use share or shareReplay instead.
ReplaySubject
https://rxjs.dev/api/index/class/ReplaySubject

ReplaySubject
output1$:
s1$:
n
1
s1$: new ReplaySubject() n next(v)
2
S
1
n
2
output2$: 2
3
S
5
n
3
[1] [1,2] [...]
5
n
[...]
5
4
n
4
[...]
43
rV rV rV rV
rV Replay values from cache
cache
1

Deep Dive
Podcast
EXPLANATION - Returns a new Observable that multicasts
(shares) the original Observable.
As long as there is at least one Subscriber this Observable will be
subscribed and emitting data.
When all subscribers have unsubscribed it will unsubscribe from
the source Observable.
PRIMARY USES - Multicasting
share

share()
1 2 3 4
input$:
share (simple)
input$: interval(1000)
1 2 3 4
output1$: 1
S U
4
1 0
output2$: 2
S U
3
2 1
0 Number of subscriptions
2 3

Deep Dive
Podcast
COMMON MISTAKES - Using publish or multicast when you should be using
share or shareReplay.
The reason you should use share / shareReplay is because under the hood
publish and multicast only have one instance of subject, so you can’t retry it if
there is an error.
Share automatically recycles the subject under the hood to allow you to
resubscribe to the subject.
When it errors or completes it will recycle and create a brand new instance so
it’s not completely dead. https://rxjs.dev/api/operators/share
share

Subject
BehaviorSubject
ReplaySubject
share
shareReplay
SUBJECTS AND
MULTICASTING

Deep Dive
Podcast
EXPLANATION - Same as share, but keeps the underlying ReplaySubject so the
next subscriber gets all the successful results and successful completion.
shareReplay does ref counting under the hood, but keeps a ref count of 1 to
make sure it can run to completion and to ensure the next subscriber gets the
last cached value.
PRIMARY USES - Retrieving expensive data via HTTP and you don’t want to get
it twice
shareReplay
https://rxjs.dev/api/operators/shareReplay

shareReplay(1)
1 2 3 4
input$:
shareReplay (simple)
input$: interval(1000)
1 2 3 4
output1$: 1
S U
4
output2$: 2
S
U
3
41
2
2 3
1 3

Deep Dive
Podcast
COMMON MISTAKES -
There is a conﬁguration object - after the last subscriber unsubscribes,
you can actually recycle, but that is not the default behavior and it
confuses a lot of people.
You should always have at least 1 argument passed into ShareReplay.
ShareReplay without an argument will cache every single value that it
had nexted into it and replay those to new subscribers.
shareReplay
https://rxjs.dev/api/operators/shareReplay

RxJS OPERATOR VIDEO SERIES
https://bit.ly/2IstZwM

THANK YOU
@benlesh
Angular Core Team,
RxJS Author
@michael_hladky
Google Developer
Expert, Angular

OUR
LINKS www.thisdot.co
This Dot Media
/thisdotmedia
news.thisdot.co

RxJS Operators - Real World Use Cases (FULL VERSION)

More Related Content

What's hot

Similar to RxJS Operators - Real World Use Cases (FULL VERSION)

More from Tracy Lee

Recently uploaded

RxJS Operators - Real World Use Cases (FULL VERSION)