Types of Subjects in RxJs Library:
Subject, Behaviour Subject, Replay Subject, and Async Subject

When I started learning Angular, I heard the very familiar word called “SUBJECT.” At that time, I really had no idea about its prominence. But today, it comes up as one of my favorite topics. So in this blog post, we are going to learn Rxjs’s SUBJECTS.

I personally think that to learn something; it is very helpful if we relate our topic to any practical scenarios. So I am gonna relate it with the Book Publishing Application, where every new book is going to be published on weekends.

Before diving into an example, let’s understand that Subjects are Multicast in nature.

What Does Multicast Mean?

It means that when an observable emits the data, that data is notified to all the other subscriptions as well. For example, if a new book is publishing, then the notification is sent to all the members who have subscribed to the book publication.

Now let’s understand the types of subjects with a small example.

Assume, we have a book publisher who has 3 books to publish namely Book A, Book B, Book C to its 4 members namely Subject, Behaviour Subject, Replay Subject and Async Subject on their subscription and gets notified on any new book added.

Now, 4 of its members have subscribed to its publication. Now think what’s going to happen?

• The 1st member Subject will not get notification yet.
• The 2nd member Behaviour Subject will get notification of Book C.
• The 3rd member Replay Subject has subscribed to receive the last two values so that one will get notification of Book B and Book C.
• The 4th member Async Subject will not get a notification.

Now let’s assume a week has passed, and a new book named Book D is available to get published.

As you can see, a new Book D is getting notified to 3 of its members.
i.e., Subject, Behaviour Subject, and Replay Subject.

Umm, But what about Async Subject? When will he start getting values? We will see it in just a moment.

From the above results, we can define that:

(1) Subject

• The subject ignores the values that are emitted before the subscription.
• It observes the values that are emitted after the subscription only.
• It doesn’t have an initial value.

For example,

subjectVar = new Subject();

    this.subjectVar.next('Value 1');
    this.subjectVar.subscribe(response => {
      console.log(‘Subscriber: ’ , response);
    });
    this.subjectVar.next('Value 2');

Output

Subscriber: Value 2

– Here, Value 1 is missed out by the subject.

(2) Behavior Subject

As you know, now that subject misses out its value before subscription, what if I want to have the latest emitted value? There comes a Behaviour subject into a picture.

• Behaviour Subject receives the last emitted/latest value at subscription.
• It is necessary to pass the initial value.
• If there is no latest value, then it emits the initial value.

For example,

 behaviourSubVar = new BehaviorSubject('Initial Value');
 
    this.behaviourSubVar.next('Value 1');
    this.behaviourSubVar.next('Latest Value');
    this.behaviourSubVar.subscribe(response => {
      console.log(‘Subscriber: ‘ , response);
    });
	
    this.behaviourSubVar.next('Value 2’);

Output

Subscriber: Latest Value
Subscriber: Value 2

Here ‘Latest Value’ is the last value emitted, So ‘Value 1’ is missed by the behavior subject.

(3) Replay Subject

Now there comes a scenario where we require all the previously emitted or a number of emitted values. At that time, the replay subject can help us to fetch all those values.

• Replay subject receives data specified in its Buffersize. If Buffersize is not mentioned, then it catches all previously emitted values when it gets subscribed.
• replaySubVar = new ReplaySubject(Buffersize);

For example,

replaySubVar = new ReplaySubject(3);

this.replaySubVar.next(‘Value 1’);
this.replaySubVar.next(‘Value 2’);
this.replaySubVar.subscribe(response=>{
  console.log(‘Subscriber 1: ‘, response)
}); 
this.replaySubVar.next(‘Value 3’); 
this.replaySubVar.next(‘Value 4’); 
this.replaySubVar.subscribe(response=>{
  console.log(‘Subscriber 2: ‘, response)
}); 

this.replaySubVar.next(‘Value 5’); 

Output

Subscriber 1:  Value 1
Subscriber 1:  Value 2
Subscriber 1:  Value 3
Subscriber 1:  Value 4
Subscriber 2:  Value 2
Subscriber 2:  Value 3 
Subscriber 2:  Value 4
Subscriber 1:  Value 5
Subscriber 2:  Value 5

(4) AsyncSubject

Async subject catches the latest value only after .complete() method. So it receives only one value.

For example,

 asyncSubVar = new AsyncSubject();

this.asyncSubVar.next('Value 1');
this.asyncSubVar.next('Value 2');
this.asyncSubVar.subscribe(response=>{
  console.log('Subscriber 1: ', response)
}); 
this.asyncSubVar.complete();
this.asyncSubVar.next('Value 3'); 
this.asyncSubVar.subscribe(response=>{
  console.log('Subscriber 2: ', response)
}); 

Output

Subscriber 1: Value 2
Subscriber 2: Value 2

Once the .complete() method is called, it does not receive any new value. Also, it does not emit values to the new subscriptions.

In subjects, we basically use four methods:

(1) .next() – This is used to publish the data.

(2) .subscribe() – This is used to observe the published data.

(3) .complete() – This method completes the whole subscription. After this method, no new values can be observed by any of the subscribers.

(4) .unsubscribe() – This method is used to unsubscribe the subscription.

Final Word

I hope now you are clear about the differences in subjects.

Before using it, ask yourself what my purpose for using is? Do I want to get all the values? Or do I want only values after subscription? Or do I need to fetch the latest value upon subscription? By answering this, you will get an answer on which to use. If you are still unsure about this and looking for the best Angular developers to use subjects and want to deep-dive into RxJS and its operators, then Hire Angular developer from us to Implement Validations in your existing Angular application.

For any further questions or suggestions, feel free to comment below.

Thank you.