What is Subject in RxJS?

The most common scenario in RxJS is when an observable produces values for a single observer, subscribed to it. In this article, I will introduce to you a new kind of observable called Subjects. The difference between Subject and Observable is that a Subject can produce values for multiple observers.

What are subjects?

In RxJS Subjects are just a special kind of observables. The Subject is implemented as a child class of the Observable. Therefore, they are just observables, with a subscribe method. The difference comes from the fact that they are also observers, so they have the observer-specific methods next, error, and complete. Subjects can act both as observables and observers, they can produce and receive values. Also, each Subject includes a list of their observers, and this makes them possible to push values to multiple observers at a time.

Here are two important notes:

• Observables are unicast– they can push values to only one observer at a time
• Subjects are multicast observables – they can push values to multiple objects at a time.

Observables are unicast, they produce values to only one observer, meaning that if a second observer subscribes, the observable will be executed a second time.

How do subjects work?

First of all, let’s see how observables work:

• Each observable can produce values.
• For an observer to receive these values, it must subscribe to the observable, using the observable’s subscribe method.
• The observer has 3 methods, next, error, and complete, which are called by the observable, respectively when a new value comes out, an error occurs, or the observable completes its execution.
• Every time an observer is subscribed to an observable it is causing the observable execution to start. If a second, third, or more observer are subscribed to that observable, each time it will start a new execution and will send values to the subscribed observer.

And then let’s see how subjects work:

• They act like a proxy between the observable and the observers.
• Subjects are observers, they are implementing the observer interface and have the methods next, error, and complete, so they can easily subscribe to an observable.
• But they are also observables, and they also have subscribe method, meaning that other observers can also subscribe to them, and receive values produced by the subjects.

When multiple observers subscribe to a subject, the subject maintains an array of observers. In this way, the subject knows which are the observers, subscribed for receiving values. On the other hand, the subject can subscribe to an observable, and receive values from there. The subject can easily process those values to its observers. This way a single observable can produce values for multiple observers at a time using the subject as a proxy. This pattern is known as multicasting.

Examples

There are two ways for a subject to send values to multiple observers. The first one is to subscribe to an observable and proxy its values to an array of observers. The second one is to produce values on its own, because subjects are also observables, and can produce their values. And again it will send the values to the array of observers. Let’s see these two examples:

Producing values on its own

Firstly, create the Subject and subscribe two observers to it. In this way they are automatically added to the observer’s array of the Subject:

// Create the Subject
let subject$ = new Subject();

// Subscribe with the FIRST observer
subject$.subscribe(data => {
  console.log(`Data passed to FIRST observer: ${data}`);
})

// Subscribe with the SECOND observer
subject$.subscribe(data => {
  console.log(`Data passed to SECOND observer: ${data}`);
})

// Produce value from the subject
subject$.next("Value from the subject");

And when the value is produced by calling subject’s next method, each observer from the array is notified:

Proxy values from another observable

In the previous example, the Subject acted like an observable and passed the value to all of its observers. But as we already know, it can also be an observer. So, let’s extend the example so far, by creating a new observable and subscribing to it with the subject:

// Create the Subject
let subject$ = new Subject();

// Subscribe with the FIRST observer
subject$.subscribe(data => {
  console.log(`Data passed to FIRST observer: ${data}`);
})

// Subscribe with the SECOND observer
subject$.subscribe(data => {
  console.log(`Data passed to SECOND observer: ${data}`);
})

// Produce value from the subject
subject$.next("Value from the subject");

// Create the observable
let observable$ = new Observable(subscriber => {
  subscriber.next("Value from the Observable!!!");
})

// Subscribe to the observable with the subject
observable$.subscribe(subject$);

The result from the code above is:

As you can see the subject passed its value to the observers, but also it proxies the observable’s value to them.