Introduction to RxJS

In the last project we worked on, we saw a line of code that’s still somewhat of a mystery. I’m referring to this line in the app.component.ts file:

this.cocktail.search(query).subscribe((response: any) => {
  this.drinks = response.drinks;
});

What does the subscribe() function do? We know that it provides us with the response from the request, but it’s not exactly clear as to how it works. Under the hood, Angular is using something called RxJS.

What is RxJS?

RxJS is a separate library from Angular. The team behind Angular liked RxJS so much that they decided to integrate it into the framework. It’s a completely independent library. More information about the library can be found here.

The purpose of RxJS is to make dealing with asynchronous tasks easier. You can think of it as an alternative to promises and async/await syntax in JavaScript. With that being said, you don’t have to use RxJS. It’s completely optional. If you prefer promises or async/await, then, by all means, use it.

Why RxJS?

There are two main reasons why using RxJS is encouraged. First, it makes data more manageable. We’ll be able to see the flow of data with RxJS. Second, it’s much easier to test. We’ll look at some examples soon to better understand these points.

One of the biggest hurdles of learning Angular is learning RxJS. It’s arguably the hardest thing to learn. If you can master RxJS, then learning the rest of Angular will be a walk in the park.