RxJS Subjects Demystified

100-RxJS Subjects Demystified.md

Understanding RxJS BehaviorSubject, ReplaySubject and AsyncSubject

What are RxJS subjects and the benefits of using them. How to understand RxJS subjects such that you can apply it in your day to day coding at your own project. Well lets get started.

There are 4 types of RxJS Subjects:

1. Subject
2. BehaviorSubject
3. ReplaySubject
4. AsyncSubject

Playground for RxJS Subject & Download RxJS subject source code here!

Subject

A Subject is like an Observable, but can multi-cast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.

Example of RxJS Subject

const log = console.log;
console.clear();

log('Subject');
log('=======');

const messageService = new Subject();

// get no data on subscribe.
messageService.subscribe(x => log(x));

messageService.next('Add to Cart');

messageService.next('Update Item Quantity');

// get no value
messageService.subscribe(x => log('dynamic subscriber', x));

messageService.complete();

// silently ignored
messageService.next('Checkout');

messageService.unsubscribe();

// nothing goes to subscribers
messageService.next('Payment');

Console Output

Subject
=======
Add to Cart
Update Item Quantity

BehaviorSubject

BehaviorSubjects are useful for representing "values over time". For instance, an event stream of birthdays is a Subject, but the stream of a person's age would be a BehaviorSubject.

Difference between BehaviorSubject & Subject

BehaviorSubject	Subject
When someone subscribes to BehaviorSubject immediately subscriber receives the latest value of the subject.	A regular observable only triggers when it receives an onNext.

At any point of time we can get the latest value from BehaviorSubject by using getValue() method and it returns the value synchronously.

Example of Behavior Subject

const log = console.log;
console.clear();

log('BehaviorSubject');
log('================');

const messageService = new BehaviorSubject('Start');

messageService.subscribe(x => log(x));

messageService.next('Add to Cart');

messageService.next('Update Item Quantity');

messageService.subscribe(m =>
  log(`Dynamic component loaded & received message: ${m}`)
);

messageService.complete();

log('After complete fetching the latest value:', messageService.getValue());

// silently ignored
messageService.next('Checkout');

messageService.unsubscribe();

messageService.next('Payment');

Console Output

Console was cleared
BehaviorSubject
================
Start
Add to Cart
Update Item Quantity
Dynamic component loaded & received message: Update Item Quantity
After complete fetching the latest value:
Update Item Quantity

Practical use of BehaviorSubject

Managing state in large application is challenging and RxJS BehaviorSubject makes state management easy job.

Practically behavior subject can be used to do state management in RxJS project.

In ngRX library BehaviorSubject is used to create teh store service to do state management in Angular project using redux concept.

ReplaySubject

A ReplaySubject records multiple values from the Observable execution and replays them to new subscribers.

Practical use of ReplaySubject

In your angular project if you are loading certain module dynamically and few components dynamically loaded needs to catchup last events then you should consider using RxJX ReplaySubject.

Example of ReplaySubject

const log = console.log;
console.clear();

log('ReplaySubject');
log('================');

const messageService = new ReplaySubject<string>();

messageService.subscribe(x => log(x));

messageService.next('Add to Cart');

messageService.next('Update Item Quantity');

messageService.subscribe(m =>
  log(`Dynamic component loaded & received message: ${m}`)
);

messageService.complete();

// silently ignored
messageService.next('Checkout');

messageService.unsubscribe();

messageService.next('Payment');

Console Output

Console was cleared
ReplaySubject
================
Add to Cart
Update Item Quantity
Dynamic component loaded & received message: Add to Cart
Dynamic component loaded & received message: Update Item Quantity

AsyncSubject

The AsyncSubject is a variant where only the last value of the Observable execution is sent to its observers, and only when the execution completes.

Example of AsyncSubject

const log = console.log;
console.clear();

log('AsyncSubject');

log('================');

const messageService = new AsyncSubject();

messageService.subscribe(x => log(x));

messageService.next('Add to Cart');

messageService.next('Update Item Quantity');

messageService.subscribe(m =>
  log(`dynamic component loaded & received message: ${m}`)
);

messageService.complete();

// silently ignored
messageService.next('Checkout');

messageService.unsubscribe();

messageService.next('Payment');

Console Output

Console was cleared
AsyncSubject
================
Update Item Quantity
dynamic component loaded & received message: Update Item Quantity

Practical use of AsyncSubject

Example assume in Angular project when you are trying to wait for couple of observables to finish their job then react & you are not interested with the meanwhile values coming from those observables. Since you are only interested on the value which is the last value of the stream then consider using AsyncSubject.