Learn RxJS
Search…
Learn RxJS
switchMap
signature: switchMap(project: function: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): Observable
switchMap(project: function: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): ObservableMap to observable, complete previous inner observable, emit values.
💡 This operator can cancel in-flight network requests!
Why use switchMap?
switchMap?The main difference between
switchMap and other flattening operators is the cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase switch to a new observable.This works perfectly for scenarios like typeaheads where you are no longer concerned with the response of the previous request when a new input arrives. This also is a safe option in situations where a long lived inner observable could cause memory leaks, for instance if you used mergeMap with an interval and forgot to properly dispose of inner subscriptions. Remember,
switchMap maintains only one inner subscription at a time, this can be seen clearly in the first example.Be careful though, you probably want to avoid
switchMap in scenarios where every request needs to complete, think writes to a database. switchMap could cancel a request if the source emits quickly enough. In these scenarios mergeMap is the correct option.Examples
Example 1: Restart interval on every click
1
// RxJS v6+
2
import { interval, fromEvent } from 'rxjs';
3
import { switchMap } from 'rxjs/operators';
4
5
fromEvent(document, 'click')
6
.pipe(
7
// restart counter on every click
8
switchMap(() => interval(1000))
9
)
10
.subscribe(console.log);
Copied!
Example 2: Countdown timer with pause and resume
1
// RxJS v6+
2
import { interval, fromEvent, merge, empty } from 'rxjs';
3
import { switchMap, scan, takeWhile, startWith, mapTo } from 'rxjs/operators';
4
5
const COUNTDOWN_SECONDS = 10;
6
7
// elem refs
8
const remainingLabel = document.getElementById('remaining');
9
const pauseButton = document.getElementById('pause');
10
const resumeButton = document.getElementById('resume');
11
12
// streams
13
const interval$ = interval(1000).pipe(mapTo(-1));
14
const pause$ = fromEvent(pauseButton, 'click').pipe(mapTo(false));
15
const resume$ = fromEvent(resumeButton, 'click').pipe(mapTo(true));
16
17
const timer$ = merge(pause$, resume$)
18
.pipe(
19
startWith(true),
20
switchMap(val => (val ? interval$ : empty())),
21
scan((acc, curr) => (curr ? curr + acc : acc), COUNTDOWN_SECONDS),
22
takeWhile(v => v >= 0)
23
)
24
.subscribe((val: any) => (remainingLabel.innerHTML = val));
Copied!
Example 3: Using a resultSelector function
1
// RxJS v6+
2
import { timer, interval } from 'rxjs';
3
import { switchMap } from 'rxjs/operators';
4
5
// switch to new inner observable when source emits, emit result of project function
6
timer(0, 5000)
7
.pipe(
8
switchMap(
9
_ => interval(2000),
10
(outerValue, innerValue, outerIndex, innerIndex) => ({
11
outerValue,
12
innerValue,
13
outerIndex,
14
innerIndex
15
})
16
)
17
)
18
/*
19
Output:
20
{outerValue: 0, innerValue: 0, outerIndex: 0, innerIndex: 0}
21
{outerValue: 0, innerValue: 1, outerIndex: 0, innerIndex: 1}
22
{outerValue: 1, innerValue: 0, outerIndex: 1, innerIndex: 0}
23
{outerValue: 1, innerValue: 1, outerIndex: 1, innerIndex: 1}
24
*/
25
.subscribe(console.log);
Copied!
Related Recipes
Additional Resources
- Nicholas Jamieson
- 🎥 💵 - John Linquist
- 🎥 💵 - André Staltz
- 🎥 💵 - André Staltz
- 🎥 - Kwinten Pisman
Last modified 1yr ago