DEV Community

Leonardo Maria Miliacca
Leonardo Maria Miliacca

Posted on

The RxJS concatenation strategies, pt 2/4

The previous article of this mini-serie was about the first concatenation strategy in the amazing RxJS world, which was a direct sequential events concatenation.

Today, I’ll dig deep into the mergeMap merging strategy.

Differently enough from the concatMap , which enqueues all the events by the input events’ order, the mergeMap operator emits events by overlapping the order. Let’s see the marble diagram below:

mergeMap marble table

Here let’s suppose that a user types in “A”, “B” ** and **“C” in a textbox attached to a Subject that emits values.

Plus, there is another Subject that takes in a stream of values, and emits three new values combining the letter typed by the user and a sequential number (1,2,3) in an interval of a second each.

So, if a user types “A”, the value emitted immediately will be “A1”, then “A2” after a second, and finally “A3” after three seconds.

Here, there isn’t a proper concatenation, is more like attaining to the word meaning: it’s merging all the emissions consequently, even if the event before hasn’t finished and even if they're overlapping each other.

This is especially true with HTTP requests. In this case, if we consider A1, A2, A3, B1 and so on as HTTP requests, they will be started consequently, and A2 will be started even if A1 isn’t completed.

Hope that this merging strategy is a bit more clearer now.
The next article will talk about the next concatenation strategy: switching.

Top comments (0)