RxJS Subjects

DEV — Sat, 22 Aug 2020 12:56:59 +0000

Subjects are multicast. An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. A Subject is an Observable and Observer. There are also a few specializations of the Subject type: BehaviorSubject, ReplaySubject, and AsyncSubject.

Subject

Subject does not return the current value on Subscription. It triggers only on .next(value) call and return/output the value.
The below code snippet will loss value 1 as no one is subscribed to the sub yet. After that A subscribed to sub and it will wait untill sub emits some value. When sub emit value 2 it will console log A - 2 and so on.

const sub = new Subject<number>();
sub.next(1); // It's lost as no one is observing sub currently
// A start observing sub
sub.subscribe({
  next: (v) => console.log(`A - ${v}`)
});
sub.next(2); // A - 2
// B start observing sub
sub.subscribe({
  next: (v) => console.log(`B - ${v}`)
});
sub.next(3); // A - 3 , B - 3
// C start observing sub
sub.subscribe({
  next: (v) => console.log(`C - ${v}`)
});
setTimeout(() => { 
  sub.next(4); // A - 4, B - 4, C - 4
},5000);

BehaviorSubject

BehaviourSubject will return the initial value or the current value on Subscription.
The below code snippet where we have bsub a BehaviorSubject with initial value as 0 . So, when A subscribed to it - it will receive the initial value. In case of C , when it subscribed to bsub it will received the current value which is 3 and will console log C - 3

const bsub = new BehaviorSubject(0);
bsub.subscribe({
  next: (v) => console.log(`A - ${v}`)
});
bsub.next(1);
bsub.subscribe({
  next: (v) => console.log(`B - ${v}`)
});
bsub.next(3);
bsub.subscribe({
  next: (v) => console.log(`C - ${v}`)
});

ReplaySubject

ReplaySubject works some what simillar as BehaviourSubject but It will not tak any initial value.
It’s take a numeric parameter which acts as buffer for the number of old values it will hold. So, when B subscribed to rsub it recived 2, 3, 4 as buffer size is 3. Therefore 1 is lost. It will also recive 5 later when it emit.

const rsub = new ReplaySubject(3);
rsub.next(1);
rsub.next(2);
rsub.next(3);
rsub.next(4);
rsub.subscribe({
  next: (v) => console.log(`B - ${v}`)
});
rsub.next(5);

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.

const asub1 = new AsyncSubject();
const asub2 = new AsyncSubject();

asub1.next(1);
asub2.next(1);
asub1.subscribe({
  next: (v) => console.log(`A - ${v}`)
});
asub1.complete(); // A - 1
asub2.next(2);
asub2.next(3);
asub2.subscribe({
  next: (v) => console.log(`B - ${v}`)
});
asub2.next(4);
asub2.complete(); // B - 4

Checkout all the above code in action at https://stackblitz.com/edit/kdev-rxjs-subjects

DEV Community: DEV

RxJS Subjects

Subject

BehaviorSubject

ReplaySubject

AsyncSubject