RxJS Subjects and Multicasting Operators

55 minutes

RxJS Subjects are a source of confusion for many people using RxJS. For many, the Subject is the obvious and only answer to every problem. Subjects are incredibly useful and necessary, but the key is to know when to use them for solving specific problems that you encounter.

In this course, we are going deep into RxJS Subjects and multicasting operators. You'll gain a solid understanding of when, where, and how to use these powerful tools.

If you are new to RxJS, or want a refresher please checkout this Introduction to Reactive Programming.

pro-course-rss-logo

PRO RSS Feed

An Observable execution may only have one Observer

Subject: an Observable and Observer hybrid

Using a Subject as an Event Bus

BehaviorSubject: representing a value over time

ReplaySubject: remembering events from the past

AsyncSubject: representing a computation that yields a final value

Connection operator: multicast and connect

Stopping a shared observable execution

RefCount: automatically starting and stopping an execution

Multicasting shortcuts: publish() and variants

Reusable multicasting with Subject factories

Multicast with a selector argument, as a sandbox

Conclusion: when to use Subjects

rx tutorial about An Observable execution may only have one Observer

An Observable execution may only have one Observer

2:13 rx

Let's remind ourselves of a fundamental behavior of the Observable in RxJS, which is: each Observable execution has only one Observer. This means we cannot directly share one single Observable execution to multiple Observers.

rx tutorial about Subject: an Observable and Observer hybrid

Subject: an Observable and Observer hybrid

4:06 rx

This lesson teaches you how a Subject is simply a hybrid of Observable and Observer which can act as a bridge between the source Observable and multiple observers, effectively making it possible for multiple observers to share the same Observable execution.

rx tutorial about Using a Subject as an Event Bus

Using a Subject as an Event Bus

3:57 rx

Every Subject is an Observer, meaning we can freely use the Observer methods next(), error(), complete() to manually send events to the Subject. This lesson will teach you how to use a Subject as an Event Bus through the Observer methods.

rx tutorial about BehaviorSubject: representing a value over time

BehaviorSubject: representing a value over time

3:31 rx

Whenever we have multiple observers sharing the same execution, some of those observers may arrive "too late". This lesson will teach you how and when to use a BehaviorSubject to mitigate that problem.

rx tutorial about ReplaySubject: remembering events from the past

ReplaySubject: remembering events from the past

5:41 rx

A BehaviorSubject can remember the latest value emitted, but what if we wanted Observer B to see all the previous values emitted in the past? We can't do that with BehaviorSubject, but there is ReplaySubject, which allows us to do that. This lessons teaches you everything you need to know about ReplaySubjects.

rx tutorial about AsyncSubject: representing a computation that yields a final value

AsyncSubject: representing a computation that yields a final value

4:02 rx

This lesson will teach you about AsyncSubject, another type of Subject with some replaying logic inside. We will also look at some use cases for this peculiar RxJS subject variant.

rx tutorial about Connection operator: multicast and connect

Connection operator: multicast and connect

5:14 rx

We have seen how Subjects are useful for sharing an execution of an RxJS observable to multiple observers. However, this technique requires some laborious setting up. In this lesson we will learn about the multicast() operator which helps solve the same problem with less code, and with a neater API.

rx tutorial about Stopping a shared observable execution

Stopping a shared observable execution

2:39 rx

ConnectableObservable has the connect() method to conveniently dictate the start of the shared execution of the source Observable. However, we need a mechanism to dictate the stop of the shared execution, otherwise a leak happens. This lesson will teach you how to do that, and it's all about Subscriptions.

rx tutorial about RefCount: automatically starting and stopping an execution

RefCount: automatically starting and stopping an execution

4:45 rx

With the connect() method on a ConnectableObservable, the programmer is responsible for avoiding leaked executions of shared RxJS Observables. This lesson will teach you about refCount(), a handy operator that creates an automatically connected Observable, to avoid manually using connect().

rx tutorial about Multicasting shortcuts: publish() and variants

Multicasting shortcuts: publish() and variants

4:21 rx

Because using multicast with a new Subject is such a common pattern, there is a shortcut in RxJS for this: the publish() operator. This lesson introduces publish() and its variants publishReplay(), publishBehavior(), publishLast(), share(), and shows how they simplify the creation of multicasted Observables.

rx tutorial about Reusable multicasting with Subject factories

Reusable multicasting with Subject factories

5:19 rx

The way we use publish() (or multicast with an RxJS Subject) makes the shared Observable not reusable if the shared execution happens to complete or emit an error. In this lesson we will see how to use a simple Subject factory function in order to create a new Subject, one for each shared execution, whenever connect() is called.

rx tutorial about Multicast with a selector argument, as a sandbox

Multicast with a selector argument, as a sandbox

7:11 rx

Let's explore a different use of the multicast() operator in RxJS, where you can provide a selector function as a sandbox where the shared Observable is available.

rx tutorial about Conclusion: when to use Subjects

Conclusion: when to use Subjects

2:36 rx

As a conclusion to this course about RxJS Subjects, lets review when and why should you use them.

Presented by:

André Staltz

Andre is a user interface engineer at Futurice, with extensive knowledge
in reactive programming. He is a contributor to RxJS, has built
RxMarbles, written an introduction to reactive programming which went
viral, and collaborated to design ReactiveX.io. His current mission is
to redefine how we understand and structure user interfaces with the
reactive web framework Cycle.js.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?