Jun 01, 2021 Article blog
"RxJS", whose full name
RxJS
"Reactive Extensions for JavaScript," is a library that writes asynchronous and event-based programs by using
observable
sequence.
This article takes you through the use of the four
Subject
in
RXJS
Subject
is
Observable
for multicasting, which means that
Subject
ensures that each subscription gets exactly the same value as shared observable execution among subscribers.
Before we introduce them, let's look at the differences between the four
Subject
and the normal
Observable
Subject
is actually an implementation of the observer pattern, so when the observer subscribes to
Subject
object, it adds the subscriber to the observer list, and whenever a new value is received, it traverses the observer list, calling
next
method inside the observer in turn to send the values out one by one.
Let's first look at how
Subject
is used:
The above example is easier to understand:
Subject
A lot of times we want
Subject
to represent the current state, not just send events, which means that if there is a new subscription, we want
Subject
to give the latest value immediately, not without a response.
This is when we can use
BehaviorSubject
BehaviorSubject
is inherited from
Subject
which has the characteristic of storing the current value. T
his means that you can always get the last emitted value directly from
BehaviorSubject
See the following code example:
What does this code do?
BehaviorSubject
behavior$
and passed in the initial value of 0 when instantiated.
behavior$
and because
BehaviorSubject
is characterized by publishing the latest value to subscribers, Subscriber A gets an initial value of 0, so it leads to Subscriber A with a subscription value of:0
behavior$
uses the built-in
next
method to issue a new value of 1, at which point Subscriber A will receive a new value, print out Subscriber A, and subscribe value 1
next
method of
behavior$
again, and since we have subscribed twice before, both Subscriber A and Subscriber B receive the new
value
(Recommended tutorial: JavaScript tutorial)
Sometimes we create a
Subject
but we want to resend the last few values each time we have a new subscription, and this time we can use
ReplaySubject
ReplaySubject
old data to new subscribers, much like
BehaviorSubject
but it also has an added feature that records a portion of
observable
execution, so it can store multiple old values and send them to its new subscribers.
When you create
ReplaySubject
you can specify how many values to store and how long to store them. I
ts first
bufferSize
specifies the size of the cache, and the default is
Infinity
which is a "space limit" for the cache of all emitted values. W
e can also pass a second parameter,
windowTime
specifying the cache's "time limit" by default to
Infinity
which is the expiration time of the unlimited value.
See the following code example:
Something happened here:
ReplaySubject
replay$
and specified that we only wanted to store the last two values
next
method of
replay$
three times to publish the value to the subscriber.
Subscriber A will then print three times
ReplaySubject
now.
We used
replay$
to create a new subscriber B, and since we told
ReplaySubject
to store two values, it will issue these final values directly to Subscriber B, which will print them out.
replay$
emits another value, at which point both Subscriber A and Subscriber B receive a change in the value and print out another value
As mentioned earlier, you can also specify when values are stored in
ReplaySubject
let's look at an example
What happened in the code above:
ReplaySubject
and specified that it stores only the last two values, but not more than 100ms
replay$
before you start your subscription. W
hen we created
ReplaySubject
we specified that up to 2 values were stored and could not exceed 100ms.
This means that after 1000ms, when Subscriber B starts subscribing, subscriber B receives only 1 value because
replay$
is 200ms.
Some students see here and feel that
ReplaySubject(1)
is not the same as
BehaviorSubject
However, there is a difference between the two, both conceptually and behaviorally.
First of all, the conceptual difference is essential,
ReplaySubject
simply caches the most recent value, it still reflects the flow of constant values ("multi-values"), while
BehaviorSubject
reflects values that change over time ("single values").
Therefore,
BehaviorSubject
needs to pass in an initial value, which will change constantly, and we can only see the current value.
Behaviorally, because
ReplaySubject
focuses on caching, when it's done, it doesn't affect our ability to continue observing its cached values.
Let's look at the following example:
ReplaySubject
finishes
complate
we subscribe to it and still get cached values, and
BehaviorSubject
does, we continue to subscribe to
complate
for no longer.
Although both
BehaviorSubject
and
ReplaySubject
AsyncSubject
works differently.
AsyncSubject
is a
Subject
variant where only the last value of
Observable
execution is sent to its subscribers and only when execution is complete (similar to
last
method in
rxjs/operators
Please refer to the following sample code:
Not much has happened this time. But let's take a look at the steps:
AsyncSubject
async$
async$
emits 2 values and remains unchanged
async$
execution
complate
is complete, at which point the last value is sent to all subscribers
Asic
AsyncSubject
can be seen from the code example above, the last value is sent after
complate
is executed, which is much like
Promise
waiting until the end of the event to send out a value.
In
Promise
we can declare that the task is complete through
resolve(value)
and send the resulting value, which is then processed through the
Promise.then()
method.
(Recommended micro-class: JavaScript micro-course)
The above is a description of the differences between the four
Subject
in
RXJS
and I hope it will help you.