The easy RxJS guide — For those that don’t like to be intimidated. (Part 1)
Does RxJS feel a bit intimidating?
Is RxJS a bit intimidating at times? Like the owl above? 😖
That’s totally understandable. My eyes rolled a bit when I saw this…
“ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences.
It extends the observer pattern to support sequences of data and/or events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety, concurrent data structures, and non-blocking I/O. — Source (Note: ReactiveX is same stuff as RxJS).
My head hurts.
Quick Overview
Learning RxJS doesn’t have to be hard.
I found RxJS hard to learn because it’s such a powerful library… with oodles of options. That’s why it’s easy to get lost or confused.
So, in this series we’ll focus on the bare minimum to get started. In this first part we’ll cover two basic concepts beginning with the…
1. Observable
An observable represents a data stream or source that will arrive whenever it’s ready.
Think of an observable as something that listens and observes. Like the owl at the top of this post.
When the right conditions are met it notifies a subscriber (next section). It is notified of any state changes.
The cool thing about an observable is that it can help free your code from callback hell which makes for a cleaner code base and less bugs.
For example, with RxJS we can tie an observable to a button click like so.
However, an observable is basically useless without a subscriber. Which leads us to the next important concept…
2. Subscriptions
The subscription is the subscribed function that gets called when an observable is notified of changes.
A subscription can also be “unsubscribed” from an Observable meaning it will receive no more notifications.
Let’s add a subscription to our previous code example. I’ll also include an unsubscribe example.
RxJS subscriptions are like many of the other things in life.
We subscribe to mailing lists and other things to be notified of new information. We unsubscribe when we get tired or bored.
In fact… if you’re still reading this article than you’re “subscribed”. 😉
End of Part 1 — Welcome Part 2.
This is the end of the first article in a series about RxJS.
In the next part we discuss Operators and gold mines. Go ahead and check it out below.
Don’t forget to share the energy with a 👏. Thank-you!
