Mastering RxJS Operators

If you just start out learning RxJS, you are probably overwhelmed by the amount of available Operators. In this article, you will learn about a strategic approach to learning everything that is necessary to write good reactive code.

Note: This article is about RxJS Operators. If you are looking for a broader overview of RxJS, I recommend reading my recent post How to learn RxJS FAST? .

When I started learning RxJS a couple of years ago, I was overwhelmed by the number of operators.

When I tried to solve a problem at hand, I picked some operators that sounded to me as if they could be combined into a matching solution. Searching for the right operators was quite a trial and error process.

And even if I found a solution, I was uncertain whether there is a simpler way to express my reactive pipeline.

I would have liked to have a guide that tells me how to learn and start applying RxJS operators. This blog post is my try on providing such a guide to you.

How to learn RxJS Operators effectively and efficiently?

Of course, it does not make much sense to randomly try out the Operators and see whether they solve your problem. The Operator names may make more or less sense to you when you get started. There are often the tiny little details that matter.

So, a good start would be to be able to understand RxJS Operators by reading their docs .

Learn to read the docs

Let’s start off with a concrete Operator like map . You’ll find the following structure:

• The name
• A short description
• The signature
• The parameters description
• The return value description
• A description with marble diagram
• An example
• Similar Operators

Note that the details of the operator docs are varying. I think it’s best to find out which parts are most helpful for you when trying to get a grasp of what the Operator does. For me, usually it’s sufficient to look at the name, the short description and the description to tell what the operator does.

The marble diagrams are very expressive as well and sometimes tell me details that are not covered in the description or what I simply overlooked when skimming it.

Understand Marble Diagrams

Most marble diagrams are easy to read. Typically, you have an input Observable emitting values at the top. The operator (often with good example parameters) is written in a box at the center. On the bottom, you have the resulting Observable after the Operator has been applied. They are quite well documented :

Occasionally, the diagrams can get a bit more complicated, if you have a higher-order Observable like mergeAll . Here, the source Observable is an Observable of Observables. You then have the inner Observables diagonally branched off from the source Observable. Maybe this helps for the understanding: The time axis is still strictly horizontally aligned. The vertical dimension has nothing to say.

Understand associations between Operators

Often you will find a list of similar or related Operators at the bottom as well. This is practical, if the operator is close to what you want, but you need some variation.

There is also a nice overview of Operator categories .

Which Operators should you learn first?

To get started with implementing RxJS code, it makes sense to learn about some basic Operators first. I would suggest that you start off with some basic Operators.

Then you can have a look at some frequently used operators to get an idea of what you can achieve with RxJS Operators. You may look them up in detail, when you start implementing your own reactive solutions.

The basic operators

Here are some Operators, every RxJS developer should know:

• of - Converts the arguments to an Observable sequence
• from - Creates an Observable from an Array, an array-like object, a Promise, an iterable object, or an Observable-like object
• defer - Creates an Observable that, on subscribe, calls an Observable factory to make an Observable for each new Observer
• map - Applies a given project function to each value emitted by the source Observable, and emits the resulting values as an Observable
• filter - Filter items emitted by the source Observable by only emitting those that satisfy a specified predicate
• tap - Used to perform side effects for notifications from the source Observable
• catchError - Catches errors on the observable to be handled by returning a new observable or throwing an error

Frequently used Operators

Those Operators are the quite frequently used. Feel free to look them up, if you think they fit your problem at hand:

• bufferTime - Buffers the source Observable values for a specific time period
• combineLatest - Combines multiple Observables to create an Observable whose values are calculated from the latest values of each of its input Observables
• concat - Creates an output Observable which sequentially emits all values from the first given Observable and then moves on to the next
• concatMap - Projects each source value to an Observable which is merged into the output Observable, in a serialized fashion waiting for each one to complete before merging the next
• debounceTime - Emits a notification from the source Observable only after a particular time span has passed without another source emission
• distinctUntilChanged - Returns a result Observable that emits all values pushed by the source observable if they are distinct in comparison to the last value the result observable emitted
• fromFetch - Uses the Fetch API to make an HTTP request
• merge - Creates an output Observable which concurrently emits all values from every given input Observable
• mergeMap - Projects each source value to an Observable which is merged in the output Observable
• scan - Useful for encapsulating and managing state. Applies an accumulator (or “reducer function”) to each value from the source after an initial state is established – either via a seed value (second argument), or from the first value from the source
• share - 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.
• shareReplay - Share source and replay specified number of emissions on subscription
• startWith - Returns an observable that, at the moment of subscription, will synchronously emit all values provided to this operator, then subscribe to the source and mirror all of its emissions to subscribers
• switchMap - Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable
• take - Emits only the first count values emitted by the source Observable
• takeUntil - Emits the values emitted by the source Observable until a notifier Observable emits a value
• withLatestFrom - Combines the source Observable with other Observables to create an Observable whose values are calculated from the latest values of each, only when the source emits

Now you should be ready to get going with RxJS Operators. Happy Coding!