Basics page
Learn the basics of RxJS.
Overview
In this part, we will learn:
- What is an observable and how subscribe to one.
- How to transform one observable into another one.
- What is a Subject and how is it different from an observable.
Video
Who has time to read? This video covers the content on this page. Watch fullscreen.
Observables
At its most simplistic, an observable is a publisher and enables the Observer pattern.
To subscribe to an RXJS observable, you call subscribe like:
When the observable publishes a value, the subscribe functions will
be called with the value. The following creates an
observable that emits 3 values. The subscriber
function
will be called back each time:
One of the advantages of the Observer pattern is that it provides loose coupling. An observable can have many subscribers. The following adds two subscribers to an observable:
Lifecycles
RxJS observables have a lifecycle. They can publish values over time and complete. They can also publish errors. You can listen to all three events with the following:
The following creates an observable that immediately
publishes a 1
, then after a second it publishes a 2
and completes:
When an observable completes, all of its subscribers are unsubscribed. This helps avoid memory leaks.
NOTE: When the observable is subscribed, the
1
value is published synchronously. Then'just after subscribe'
is logged.
Unsubscribing
The observable.subscribe()
method returns
a subscription which can be used to cancel
the subscription like:
Unsubscribing prevents receiving future notifications and avoids memory leaks.
The following unsubscribes before the second published value. Notice that
the subscriber
function is only called once.
Transforming observables to other observables
Observable libraries like RxJS have many operators that transform published values on one observable to published observables on another observable. In fact, using these operators is a majority of what you will do with RxJS.
But for now, lets see how to transform
... the numbers published on the numberMaker
observable ...
into
... a running sum published by numberSummer
.
Read the inline comments below to see how this works.
Observables vs Subjects
Each time an observable is subscribed to, it creates a new and distinct execution context. This can be unexpected or even undesirable. Let’s see what a distinct execution means.
In the following example, the observable emits a random number after a second then completes. Notice that each subscriber gets a different random value.
Each subscription gets a different random value because
every subscription creates a new observable execution. The following
example shows this more directly.
The example logs 'observable execution' each time observable.subscribe
is called:
Observables are unicast (each subscription owns an independent execution of the observable). This can often have undesirable results. For example, you often want multiple subscribers receiving the same value.
Subjects
are just like Observables except they publish values
to many observables at once without creating new execution contexts.
In the following example, you’ll notice that each subscription gets the same random value:
As subjects have a .next()
, .error()
and .complete()
method, they
can also be useful object to connect with a framework's template engine as
we will do in the next part.