RxJS Subjects for human beings

I have already published an article on the subject, but this time I want to take a different approach.

The easiest way to understand what Subject is is to re-create one. Let’s create a simple version of Subject .

Let’s look at the facts.

Subject is both an Observable and Observer

Subject is Observable

It means he has all the operators (map, filter, etc. ) and you can subscribe to him.

That’s all you need for the first part. You can be Observable by extending the Observable class.

Subject is Observer

It means he must implement the next(), error(), and the complete() methods.

OK, let’s move to the next fact.

Subject can act as a bridge/proxy between the source observable and many observers, making it possible for multiple observers to share the same observable execution.

When you call the subscribe() method you only push an observer into an array. The next(), error() and complete() methods will push the same value to each observer in the array.

Let’s use our Subject.

When using a Subject, it does not matter when you subscribe you will always get the same execution as opposed to the typical observable where you will start a new execution upon every subscription. ( in our case it means that you will have two unrelated intervals )

Subject let you share the same observable execution

Let’s summarize what happened here.

When you call subscribe on a subject, you just push the observer into an array.

When the subject act as an observer, he will call next() on every observer in the array when the source emits. ( in our case the interval )

BehaviorSubject

Now let’s try to implement a simple version of BehaviorSubject .

Let’s look at the facts.

• BehaviorSubject needs an initial value as it must always return a value on subscription even if it hasn’t received a next().
• Upon subscription it returns the last value of the subject.
• At any point you can retrieve the last value of the subject in a non-observable code using the getValue() method.

Let’s use our BehaviorSubject .

ReplaySubject

Now let’s try to implement a simple version of ReplaySubject .

Let’s look at the facts.

• ReplaySubject represents an object that is both an observable sequence as well as an observer.
• Each notification is broadcasted to all subscribed and future observers, subject to buffer trimming policies.

Let’s use our ReplaySubject .

When to use Subject

• You need to share the same observable execution.
• When you need to decide what to do when an observer arrives late, do we use ReplaySubject, BehaviorSubject?
• You need full control over the next(), error() and complete() methods.

Note: The following examples are just to illustrate the concept, they are not production ready, and they are not the real or the full implementation of Subjects in Rx.

🔥 Last but Not Least, Have you Heard of Akita?

Akita is a state management pattern that we’ve developed here in Datorama. It’s been successfully used in a big data production environment, and we’re continually adding features to it.

Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

I highly recommend checking it out.

🚀 Introducing Akita: A New State Management Pattern for Angular Applications

Follow me on Medium or Twitter to read more about Angular, Vue and JS!