Understanding Observables in RxJS
Published: 2022-01-19 22:53:48

Do you want a different way to handle state in your Javascript applications? Then I suggest giving Reactive Programming a try, and more specifically, <a href="https://RxJS.dev/">RxJS</a>. 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.
<h2>What is the <a href="https://en.wikipedia.org/wiki/Observer_pattern">Observer Pattern</a>?</h2>
The Observer pattern is a sequence of the following events:
1. New data is emitted or state has changed in an <code>Observable</code> object.
2. The <code>Observer</code>s of the <code>Observable</code> are notified of the change.

<h2>Subscribing to events</h2>
In RxJS all <code>Observables</code> have an internal <code>subscribe</code> function, this function is how different <code>Observers</code> throughout the application are notified of <code>Observables</code> updates.

<h2>Potential Snags</h2>
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 <code>Observables</code> using RxJS.
<h2>How to Create an RxJS <code>Observable</code></h2>
Install RxJS in your project:
<pre><code>npm install RxJS</code></pre>
In our main.js file:
<pre><code>import { of } from '`RxJS`'
import './subscriptions'

const clientList = ['clientOne', 'clientTwo', 'clientThree']
export const clientsObs = of(...clientList)</code></pre>
In our subscriptions.js file:
<pre><code>import { clientObs } from './main.js'

clientsObs.subscribe(client =&gt; `console.log`(client))
</code></pre>
The result of our <code>console.log</code>:
<pre><code>clientOne
clientTwo
clientThree</code></pre>
1. In your main.js file import <code>RxJS</code>.
2. Create a list of clients.
3. Convert the list of clients into an <code>Observable</code> using the <a href="https://RxJS.dev/api/index/function/of"><code>of</code></a> function.
4. Import the <code>clientObs</code> variable to the subscription module, and connect to it using the <code>subscribe</code> method.

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

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 <code>Observable</code> from our <code>clientList</code> named <code>clientsObs</code>, we imported our <code>clientObs</code> to our subscription file, in our subscription file we <code>subscribe</code> to the <code>clientObs</code>, this action of subscribing makes the subscription file an <code>Observer</code>, then the <code>clientObs</code> emitted three different events at different times, and our subscription <code>Observer</code> printed those events to the console.

Congratulations, we have written our first <a href="https://RxJS.dev/guide/observable"><code>Observable</code></a>
<h2>Summary</h2>
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 <code>Observer</code> Pattern, which is powerful and useful, because out of the box we can write different <code>Observable</code> 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 <code>Observables</code> a try if you are interested in exploring another way to manage state in Javascript.

_Learn more about how The Gnar [builds React applications](https://www.thegnar.com/software-development/react-development-js)._