An introductory guide to the mergeMap operator in RxJS, along with its DOs and DON’Ts.

Photo by Volodymyr Hryshchenko on Unsplash

We covered the concatMap and the switchMap, let’s continue with the mergeMap. As always, we’re going to go through some examples, which are showing the edge cases of this operator, then I try to summarize the article with some DOs and DON’Ts.

The Basics

As always let’s start at the RxJS docs and look at the definition and the basic example.

Projects each source value to an Observable which is merged in the output Observable.


It’ll keep the bugs away!

Photo by Volodymyr Hryshchenko on Unsplash

Last time, we started off with the concatMap operator. We checked out how it works and how does it deals with different kinds of observables. Today, we are going to continue with the switchMap operator.

The basics

Like the last time, let’s start with checking out the official docs about this one.

Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.


It’ll keep the bugs away!

Photo by Volodymyr Hryshchenko on Unsplash

I’ve started this series of articles to go through every operator, creational, and others inside RxJS. Although I used and know a lot of them, I don’t know every last one of them. A lot of times, I realize that there would be a much more cleaner or shorter way of doing things if I would just know that one operator. I wanted to keep these articles short, but meaningful with several examples, so I decided to go with one operator per article.

The basics

Let’s see what the docs say about today’s operator, the concatMap.

Projects…


In this series, I’d like to describe some RxJS operators with pictures or memes. I’m going to provide a description too, of course, but I could always learn something much easier with some funny reference or story.

I’m not really going to follow any kind of path here, but I try to go from the less complex operators to the more advanced, more complex ones. Let’s jump into it!

The map operator


RxJS Observable creation, like a pro

This is part 3 of my series about RxJS, you can check out my other articles on the below links:

In the previous part of this series, I wrote about the differences of Hot vs Cold Observables. A crucial part of RxJS, if you don’t know what they are, I highly recommend to read it before going forward. …


Careful hot stuff ahead! What are the Hot and Cold Observables in Rx?

This is part 2 of my series about RxJS, you can check out my other articles on the below links:

In the previous part of this series of articles, I wrote about the basics of RxJS and how the Observables are working, what concepts are they built upon. …


What are the basic concepts which RxJS is built upon?

We will go through the Observer pattern, the basics of Functional Programming and then take on the basics of RxJS.

The foundations of Rx

The Reactive Extensions lies on several foundations, basic concepts which it is built upon. I like to highlight some of these before we dig deeper.

Image by Csaba Nagy from Pixabay

Observer Pattern

The Observer pattern is a design pattern, which the Rx “simply” implements. Since this pattern is one of the main cornerstones of Rx, I’d like to talk about it a bit.

Fortunately, we can find a really good definition of the pattern on Wikipedia.

The observer pattern is a software design pattern in which an…

Tamás Mónus

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store