This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!
An Introduction to Reactive Extensions
Rx.js let’s you program applications using reactive programming, a special flavor of programming where you operate on event streams, which are sequences of events happening over time. It is useful because it simplifies programming asynchronous applications greatly.
A Quick Intro to Event Streams
1 2 3 4 5 6 7 8
An stream can push these same collection of items over time:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Using RxJs With The DOM
RxJS makes it very easy to turn DOM events into streams by using the
fromEvent method. For instance, we can create a click counter like this:
1 2 3 4 5 6 7 8 9
We can take advantage of the numerous operators provided by RxJs to create very compact programs without side-effects that would otherwise require a lot of code. For instance, here’s a double click detector:
1 2 3 4 5 6 7 8 9 10 11 12
Using RxJS with Asynchronous Requests
A common pattern in handling asynchronous requests is the Promise. A promise is very similar to an event stream that only pushes a single event in the stream when the promise is either resolved or rejected. RxJS offers a very simple way to convert a promise into an event stream by using the
fromPromise operator. The following example shows how to use RxJS to make an async request to Github’s API using the new fetch API:
1 2 3 4 5 6 7 8 9 10
The example above uses
flatMap instead of
map. Why is that? The reason is that if we were to just using
map we would get a stream of streams (or a metastream). In order to have a single stream, which is much easier structure to work with, we collapse or flatten the metastream into a single stream so that all values emitted by any separate stream are pushed into this flattened stream.