RxJS essentials that every Angular beginner needs to learn
If you don’t understand at least the basics, the 101, the bread and butter of RxJS, you’re leaving a lot of helpers behind. You’re wasting your time and energy! Let me explain:
Angular was grounded in RxJS paradigms and “lifestyle”. You won’t see Promises been handled very often on a file generated by CLI or on Angular documentation, because Observables can do everything Promise could and even more.
To understand that bold statement, we need to differentiate what is a pull system and a push one. A pull systems is when a data consumer determines when it gets new data from a data producer. An iterator is a pull system, because, whenever it needs more values from the iterated array, for example, it can gets. Push systems is the opposite. It’s when the data producer defines when new values will be available for consumer to use. Promise is the favorite answer, basically, when you write a set of instructions inside the .then() callback, you telling that whenever the data producer send the data, those instructions will be executed.
Observables and observers
Understanding what push system is, you can understand why Observables is Promises with superpowers. Mainly, Observables is a push-based structure which can handle multiple values coming from a single data producer, Promises can handle just a single value. Observables start a stream between the producer and consumer forever and ever until it complete its mission.
And before I show you an example to clarify all of that, you need to understand how .subscribe() method is also a .then() method with superpowers. We call .subscribe() by an observer, as the name says, it observes an observable thing. And while it observes new values coming from data producer, it has three parameters that are callbacks, the first: (next => {}) handles every new value, after, (error => {}) handles any Javascript error that data producer sent and last (() => {}) execute one single time when the Observable complete, when its stream is closed. Quick hint: if you explicit don’t complete an Observable, it goes forever.
As you can see, I first created an observable, emitted values 2 times and then completed the observable stream, because I don’t want my observer observes forever.
Async pipe and Subscription
I already mention twice that Observables can go through infinite and beyond, but we already know that every resource is limited, like your processor, RAM memory, etc. When you’re in real life, working with real Angular code, you’ll not always build your own Observable and defines when it will be completed, sometimes an Observable will be an event listener, a http request and more, in those cases, you need to manually finish the infinite stream, or .unsubscribe() a Subscription — an execution of an Observable.
When you .unsubscribe(), you cut in half the bond between the Observable and observer, observer no longer observes, then, the infinite statement is over. Because this subscribe-unsubscribe could be really repetitive, Angular implements Async pipe. I’m assuming you know what a pipe here. You can bind a Observable directly in the template followed by a simple: ‘| async’. Therefore, you get every data producer change right on template and when that component is destroyed, that stream will be unsubscribed without any effort.
Another handy trick Angular does for us is unsubscribe every http request made with HttpClient as default. Imagine if you need to unsubscribe every request, would be a pain in the neck.
pipe() and operators
When you’re working with arrays in js, you often goes with a .reduce(), .filter() to handle the source and raw data into a user-friendly data. When you work with Observables, you can do the same, just put those methods inside a pipe() method and start list what you need.
Applying map and filter that way, the console input becomes:
2
4
‘It’s over’
There are lots of different operators and as you progress on Angular you’ll need more and more of those operators, so, go deeper on the RxJS documentations.
