Easy RxJS Tricks: Combining Subjects Like a Pro!

Discover the surprisingly simple way to combine RxJS subjects — it’s easier than you think!

Combining RxJS Subjects: A Simple Guide

Have you ever wondered how to combine subjects in RxJS? It’s actually not as complex as it sounds. Let’s explore a straightforward approach that makes it a breeze. Imagine you have two streams of data, like two rivers flowing with information. The challenge is to merge these streams so that they work together smoothly.

Let’s start with a basic scenario. You have two subjects, Subject A and Subject B. Each subject emits its own set of values over time. The goal is to create a new stream that combines these values in a specific way. How do we do that? Well, that’s what we’re here to figure out!

const subjectA = new Rx.Subject();
const subjectB = new Rx.Subject();

In our example, Subject A could be emitting numbers and Subject B letters. The aim is to combine these in a way that, every time both have emitted values, we get the latest of each.

Here’s the solution. We’ll use some RxJS magic to merge these streams. One way to approach this is by using combineLatest(). This function takes our subjects and creates a new observable. It emits values every time either subject emits a new value, giving us the latest from each.

combineLatest([subjectA, subjectB]).subscribe(value => {
  console.log(value);
});

This code will log a pair of values every time either subject emits. But wait, we need it to emit only when both have emitted at least once and then again after each has emitted a new value. To achieve this, we’ll add a twist with some more RxJS tools!

We’ll enhance our solution by including the take(1) and repeat() operators. take(1) ensures that only the first emission after each subject has emitted is considered. Then, repeat() resubscribes to the observable, allowing it to react to new emissions. Here's how it looks:

combineLatest([subjectA, subjectB]).pipe(
  take(1),
  repeat(),
).subscribe(console.log);

With this setup, whenever both subjects emit a new value, our combined stream will update with the latest values. It’s a neat and efficient way to synchronize two data streams in RxJS!

RxJS combineLatest: Official References and FAQs

For those who want to dive deeper into RxJS and the combineLatest function, here are some official references:

• RxJS combineLatest Documentation
• RxJS combineLatestWith Documentation

FAQs

What is RxJS combineLatest?
RxJS's combineLatest function merges values from all Observables in the given array, subscribing to each and collecting the most recent values from each when any Observable emits.

Has combineLatest been deprecated?
Yes, in RxJS v8, combineLatest will be replaced with combineLatestWith.

How does combineLatest differ from combineLatestWith?
combineLatest creates an Observable that combines values from passed observables into arrays and emits them. combineLatestWith is a stable operator that functions similarly, but it's used with the source observable to combine the latest values.

What does combineLatest return?
It returns an Observable of projected values from the most recent values from each input Observable, emitting the output of a formula computed using these latest values.

Originally published on HackingWithCode.com.