Search⌘ K
AI Features
Home
Courses
Build Reactive Websites with RxJS: Master Observables and Wrangle

The Two Merges

Explore the use of merge as both a constructor and operator in RxJS to manage asynchronous event streams. Understand how the scan operator emits intermediate results during event processing, enabling dynamic updates like loading bars that reflect progress as each request completes.

We'll cover the following...

The two merges

In the below example, merge is used as a constructor (a way to create a new observable).

In cases where everything starts at the same time (like the loading bar), merge used as a constructor is simpler than the operator form.

TypeScript 3.3.4
merge(...requests)
.subscribe(
    val => drawToPage(val),
    err => alert(err)
);

However, it’s also an operator:

TypeScript 3.3.4
let obsOne$ = interval(1000);
let obsTwo$ = interval(1500);
// Piping through the merge operator
obsOne$
.pipe(
  merge(obsTwo$)
)
.subscribe(console.log);
// Is the same as using the merge constructor
merge(obsOne$, obsTwo$)
.subscribe(console.log);

merge as “operator”

The operator form of merge comes in handy when you’re in the middle of an observable chain and want to add in more data. ...