Understanding rxjs BehaviorSubject, ReplaySubject and AsyncSubject

Photo by Cory Schadt on Unsplash

The BehaviorSubject

One of the variants of the Subject is the BehaviorSubject. The BehaviorSubject has the characteristic that it stores the “current” value. This means that you can always directly get the last emitted value from the BehaviorSubject.

  1. We first create a subject and subscribe to that with Subscriber A. The Subject then emits it’s value and Subscriber A will log the random number.
  2. The subject emits it’s next value. Subscriber A will log this again
  3. Subscriber B starts with subscribing to the subject. Since the subject is a BehaviorSubject the new subscriber will automatically receive the last stored value and log this.
  4. The subject emits a new value again. Now both subscribers will receive the values and log them.
  5. Last we log the current Subjects value by simply accessing the .value property. This is quite nice as it’s synchronous. You don’t have to call subscribe to get the value.

The ReplaySubject

The ReplaySubject is comparable to the BehaviorSubject in the way that it can send “old” values to new subscribers. It however has the extra characteristic that it can record a part of the observable execution and therefore store multiple old values and “replay” them to new subscribers.

  1. We create a ReplaySubject and specify that we only want to store the last 2 values
  2. We start subscribing to the Subject with Subscriber A
  3. We execute three new values trough the subject. Subscriber A will log all three.
  4. Now comes the magic of the ReplaySubject. We start subscribing with Subscriber B. Since we told the ReplaySubject to store 2 values, it will directly emit those last values to Subscriber B and Subscriber B will log those.
  5. Subject emits another value. This time both Subscriber A and Subscriber B just log that value.
  1. We create the ReplaySubject and specify that we only want to store the last 2 values, but no longer than a 100 ms
  2. We start subscribing with Subscriber A
  3. We start emiting Subject values every 200 ms. Subscriber A will pick this up and log every value that’s being emited by the Subject.
  4. We start subscribing with Subscriber B, but we do that after 1000 ms. This means that 5 values have already been emitted by the Subject before we start subscribing. When we created the Subject we specified that we wanted to store max 2 values, but no longer then 100ms. This means that after a 1000 ms, when Subscriber B starts subscribing, it will only receive 1 value as the subject emits values every 200ms.

The AsyncSubject

While the BehaviorSubject and ReplaySubject both store values, the AsyncSubject works a bit different. The AsyncSubject is aSubject variant where only the last value of the Observable execution is sent to its subscribers, and only when the execution completes. See the example code below:

  1. We create the AsyncSubject
  2. We subscribe to the Subject with Subscriber A
  3. The Subject emits 3 values, still nothing hapening
  4. We subscribe to the subject with Subscriber B
  5. The Subject emits a new value, still nothing happening
  6. The Subject completes. Now the values are emitted to the subscribers which both log the value.

Conclusion

The BehaviorSubject, ReplaySubject and AsyncSubject can still be used to multicast just like you would with a normal Subject. They do however have additional characteristics that are very handy in different scenario’s.

Do you consider yourself to be one of the best?

I work for Founda as a Senior front-end developer and we are looking for Senior developers that specialise in Vue and/or Node.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store