Subjects in RXJS

RXJS is a powerful library to work with observables.

Photo by Patrick on Unsplash

RXJS provides a numbers of subjects, each of which have some special characteristics and can be applied in different use-cases. Subjects can either be created (Observer) or be subscribed (Subscriber). You can use the same subject to create a stream, and then subscribe it to get the stream. Below are the different subjects that we are going to cover:

• Subject
• Behavior Subject
• Replay Subject

Subject: Subjects are basically event emitters. They can also multicast. This is a very powerful feature of Subjects. As I mentioned above, that you can create an Observer with a subject and then subscribe to the same subject to receive the stream. Subject has two methods, namely, next() and subscribe(). Let’s see an example of this:

import { Subject } from 'rxjs';
const exampleSubject = new Subject();
// To listen to this stream, I can simply subscribe the same subject
exampleSubject.subscribe(res => {
    console.log(res) // 1 2 3
})
// To emit a stream of numbers, I can do like below:
exampleSubject.next(1);
exampleSubject.next(2);
exampleSubject.next(3);

Behavior Subjects: This is a special type of subject. It has two differences, one is that it requires an initial value. Hence, whenever we define a behavior subject, it will be instantiated with an initial value. The other difference, is that whenever you subscribe to a behavior subject, it will provide you the last emitted value, to any new subscribers. Let’s see this in action below:

import { BehaviourSubject } from 'rxjs';
// When initializing, a default value must be provided
const exampleSubject = new BehaviourSubject(1);
// To emit a stream of numbers, I can do like below:
exampleSubject.next(2);
exampleSubject.next(3);
// Till this point, 3 was the last value emitted by this observable
// Now, if we subscribe to this behavour subject, we will get the 
// last emitted value,
// and any new values that are emitted after that
exampleSubject.subscribe(res => {
    console.log(res) // 3 4
})
exampleSubject.next(4);

Replay Subjects: Another powerful subject from RXJS. This subject is a little superior to behavior subject, where it can emit all the previous values (replays) to new subscribers of this subject. The different between behavior subject and replay subject is that the former only emits the last emitted value, whereas the latter can emit all the previous values. These subjects take some configurations to limit the number of last emitted values to be stored and emitted.

import { ReplaySubject } from 'rxjs';
// When initializing, a default value must be provided
const exampleSubject = new ReplaySubject(1);
// To emit a stream of numbers, I can do like below:
exampleSubject.next(2);
exampleSubject.next(3);
// Till this point, 1 2 & 3 were emitted by this replay subject
// Now, if we subscribe to this, we will get all the last 
// emitted values, and any new values that are emitted after that
exampleSubject.subscribe(res => {
    console.log(res) // 1 2 3 4
})
exampleSubject.next(4);

Hope this article has intrigued you to try these subjects in various use-cases and harness the great power of RXJS.

If you like this article, and want to learn more on RXJS, please refer to my other articles below:

Using RXJS like a pro

Using RXJS like a pro … Continued

Happy Reading :)