Understanding Observables in RxJS

Ivan Trujillo Ayala — Wed, 19 Jan 2022 22:53:48 +0000

Do you want a different way to handle state in your Javascript applications? Then I suggest giving Reactive Programming a try, and more specifically, RxJS. RxJS is a framework-agnostic library that provides tools for applying the Observer pattern. RxJS has extensive operators for handling state, and it is equipped with asynchronous event management functions. This means that no additional libraries are required to handle the asynchronous events for your application, which leads to a leaner dependency tree.

What is the Observer Pattern?

The Observer pattern is a sequence of the following events:

New data is emitted or state has changed in an Observable object.
The Observers of the Observable are notified of the change.

Subscribing to events

In RxJS all Observables have an internal subscribe function, this function is how different Observers throughout the application are notified of Observables updates.

Potential Snags

Here are some considerations before using this library.

RxJS requires time to learn, implement, and practice. Engineers, make sure that there is ample runway to get everyone in your team up to speed because the learning curve can get steep quickly.

The documentation is dense, it will most likely require more than one read through to grasp the concepts required to use it. We would like to see the RxJS authors polish its wording to make it more user friendly.

Below is a simple example to get started with Observables using RxJS.

How to Create an RxJS `Observable`

Install RxJS in your project:

npm install RxJS

In our main.js file:

import { of } from '`RxJS`'
import './subscriptions'

const clientList = ['clientOne', 'clientTwo', 'clientThree']
export const clientsObs = of(...clientList)

In our subscriptions.js file:

import { clientObs } from './main.js'

clientsObs.subscribe(client => `console.log`(client))

The result of our console.log:

clientOne
clientTwo
clientThree

In your main.js file import RxJS.
Create a list of clients.
Convert the list of clients into an Observable using the of function.
Import the clientObs variable to the subscription module, and connect to it using the subscribe method.

By using the subscribe function in our subscription file, you create an Observer of the clientObs. This Observer will be notified of new events emitted from the clientsObs, which is exported from the main.js file. In this example our events print to the console.log.

This pattern is useful because it allows us to write decoupled code, that is still aware of events and new data from other observed sources.

In our example we have defined an Observable from our clientList named clientsObs, we imported our clientObs to our subscription file, in our subscription file we subscribe to the clientObs, this action of subscribing makes the subscription file an Observer, then the clientObs emitted three different events at different times, and our subscription Observer printed those events to the console.

Congratulations, we have written our first Observable

Summary

If you are considering using this library, just remember that RxJS has its snags in the form of time and dense documentation. On the other hand, RxJS allows us to write applications using the Observer Pattern, which is powerful and useful, because out of the box we can write different Observable sources anywhere in our project. RxJS works well with established libraries, plays nice with Typescript, and addresses scalability issues through it's many operators.

Give RxJS and Observables a try if you are interested in exploring another way to manage state in Javascript.

Learn more about how The Gnar builds React applications.