RxJS — Six Operators That you Must Know

Netanel Basal
Netanel Basal
Published in
3 min readJan 24, 2017

--

1. Concat —

Subscribe to Observables in order but only when the previous completes, let me know, then move to the next one.

Use this operator when the order is important, for example when you need to send HTTP requests that should be in order.

2. forkJoin —

forkJoin is the Promise.all() of Rx.

Don’t let me know until all the Observables are complete, then give me all the values at once. ( Array )

Use this operator when you need to run the Observables in parallel.

3. mergeMap —

First, let’s understand two terms in the Observables world:

  1. Source ( or outer ) Observable — in this case, this is the post$ Observable.
  2. Inner Observable — in this case, this is the getPostInfo$ Observable.

Only when the inner Observable emits, let me know by merging the value to the outer Observable.

4. pairwise —

Let me know when the Observable emits, but also give me the previous value. ( Array )

Scrolling…

Triggers on the second and subsequent triggerings of the input Observable.

5. switchMap —

Like mergeMap but when the source Observable emits cancel any previous subscriptions of the inner Observable.

In our example, every time I’m clicking on the document, the previous interval subscription will cancel, and a new one will start.

6. combineLatest —

Let me know when any Observable emits but also give me the latest value from the others. ( Array )

This operator is very useful when you need for example to deal with filters in your app.

If you want to know more about Observables you can read my articles:

  1. Observables under the hood.
  2. Understanding Subjects In Rx.

👉 Give me some ♥️ by clicking the heart below

--

--

A FrontEnd Tech Lead, blogger, and open source maintainer. The founder of ngneat, husband and father.