Subject, Behaviour Subject & Replay Subject state on initialise.

Summary

When I first began exploring RxJS Subjects I struggled to understand when to use the different Subjects available through RxJS. I always feel the best way to appreciate patterns in software design is to apply it to a real world scenario to better understand it. In this article we are going to learn Subjects as Observables using a deck of cards.

// Legend Dealer: Publisher/Observable

Cards: Data stream

Players: Subscribers Player 1: Subscriber to Subject as Observable

Player 2: Subscriber to Behaviour Subject as Observable

Player 3: Subscriber to Replay Subject as Observable

Quick overview of our RxJS Subjects

new Subject() On subscription there is no value, it receives the next value emitted in the data stream.

new BehaviourSubject(‘’) On subscription will receive the last value in the data stream and will receive every value emitted from the stream after that.

new ReplaySubject(3) On subscription will receive the specified number of values (buffer is set to 3 in our case) and will receive every value emitted after that.

Note: For a more comprehensive explanation see this stack overflow comment — https://stackoverflow.com/a/43119768/5377730

RxJS Subjects with a deck of cards.

Have a look at our example below — the card table has a dealer and 3 open seats, or an observable with 3 unsubscribed components.

Observable; Dealer, Data stream; playing cards , Subscribers: Subjects

Now activate our observable data stream by dealing out some cards.

Observable produces 4 values from to the data stream.

Our dealer has dealt 4 cards; 10, J, A, 8 with nobody sitting at the table. this represents our data stream that none of our subscribers have yet to subscribe to. Let’s see what happens when some players sit down at the card table.

Player ‘Subject’ joins the table

Subject joins the table and can not see any of the last dealt cards, but will be able to see the next cards dealt. With Subject on initial subscription there is no value, it receives the next value emitted in the data stream.

‘Subject’ as Observable initialises with no value.

Player ‘Behaviour Subject’ joins the table

Behaviour Subject has joined the table and can see only the last dealt card from the dealer, which was 8. Like Subject it too will be able to see the next cards dealt.

‘Behaviour Subject’ as Observable initialises with last cached value from data stream.

Player ‘Replay Subject’ joins the table

Remember with Replay Subject you can set a buffer size, this is the number of values you want the Subject to receive on initialize. We have this set to 3. Replay Subject joins the table and can see the last 3 cards dealt J, A, and 8. And like the other subjects it too will receive all next cards dealt.

‘Replay Subject’ as Observable initialises with the last 3 cached values from the data stream.

Now that all players are sitting at the table (all components are subscribed to the Subjects as Observables) watch what happens when the dealer deals another card (emits another value to the data stream).

All subscriptions receive next value emitted from data stream.

We can see as all our players (subscribers) receive the next card dealt by the dealer (value emitted by the data stream).

Conclusion

Using a deck of cards to represent an observable data stream, we have understood the difference between Subject, Behaviour Subject, and Replay Subject. I hope this helps you better understand the differences between all 3 Subjects.

Please see full StackBlitz example, try subscribing and unsubscribing whilst outputting new values from the data stream to better understand how you could utilise the different Subjects for your project.

Understanding RxJS Subjects, Behaviour Subjects & Replay Subjects with a deck of cards.

Note: In this article we return the Subject as an Observable. This is not required as Subject is already an observable, and anybody could subscribe directly to the Subject , however the asObservable() pattern is used as a way to limit what users can do with it, i.e. so users only use it to subscribe to, and not emit to.

I hope you enjoyed this article. If you have any suggestions for improvement related to the content of this article or queries please leave in the comments. Thanks!