RxJS Basics: Observers

Welcome to RxJS Basics, a series that explains basic RxJS topics and terminology. It’s pretty common for developers to use RxJS and not understand what it does. Thus, I’m assuming you already know how to use RxJS, TypeScript, and JavaScript.

In this article, we are going to look at Observers. It’ll be helpful to understand Observables, so head here first if you need a refresher.

What is an Observer?

The RxJS documentation defines an Observer as:

An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete.

One of the most common mistakes developers make when learning RxJS is forgetting to subscribe to Observables. (We’ve all done it!)

When you create an Observable, it pretty much does nothing. It is lazy by design. So an Observable on its own is pretty much wasted code. There has to be some follow-up, invocation, callback, etc.

The Observer

It’s possible you’ve used RxJS and have never seen an Observer even though you are using them all the time. It looks like this:

The object takes in three possible callbacks for each type of notification.

• Next - Probably the most used callback, next, is the function that runs every time the Observable emits a new value.
• Error - Anytime something goes wrong inside the Observable, the error callback runs.
• Complete - The complete callback runs when the Observable will no longer emit notifications.

Much like an Observable, an Observer by itself does nothing, so let’s pass it into the subscribe method.

If all this looks strange, don’t worry. You are probably used to writing your subscribe call like this:

You’ll be glad to know that internally RxJS will convert the function you passed into an Observer object. So both code snippets result in the same output.

The Partial Observer

The Observer object can also be partial and doesn’t require all three callbacks. If, for example, you want to run something when the Observable completes, you can provide a complete callback on the Observer but leave out the error callback.

Internally, RxJS will still emit notifications for each callback even if we didn’t provide a function for RxJS to use.

Alternately, you can leave out all the callbacks, and it will still run like this example below.

Most of the time, this isn’t practical because you are relying on the side effects of your subscription to perform some tasks successfully. So instead, place the logic for handling events in your next callback as much as possible.

Why is it important?

Regardless of whether you are making a simple callback to an HTTP request or reacting to user activity such as clicks events or keystrokes, understanding Observers will allow you to write maintainable and reusable RxJS code. When used correctly, an Observer gives you total control over how your application reacts to state changes without coupling any of the resulting behaviors together.

Hopefully, this helps anyone looking for ways to improve how they use RxJS or just looking for a better understanding of Observers. Feel free to drop any questions or suggestions in the comments. Have a great day!