RxJS is cool and increasingly popular, but it seems like there’s a fair bit of confusion around when and why you would use it. “Why would you ever need that?”, your coworkers might say to you.
I’m no RxJS expert and I don’t think it’s needed for every project, but for me, the main reasons to use it are that it allows you to:
Easily compose multiple events into one.
Declaratively transform the value emitted by an event sequence in a functional, lodash-esque style.
Better model asynchronous data flow. Keyboard input, AJAX requests, events from an event emitter, etc. are all asynchronous and produce values over time. Representing that with the same interface has a lot of value.
Let’s look at an example that demonstrates those bullet points.
Show me teh codez
So we want to create an event emitter that emits true/false when a user’s internet goes online/offline. Quite a few applications have this functionality, so it seems like a good example.
The requirements of what we’re trying to create is:
call the provided callback initially with the current online/offline status
emit true/false when online/offline
support multiple subscriptions (aka multiple callbacks registered to the event)
support unsubscribing a subscription
unsubscribe from underlying event sources if there are no subscriptions
don’t subscribe to event sources unless there’s a subscription
We’ll do the vanilla JS version first. The caller of this event emitter might look like this:
const onlineEmitter = createOnlineEmitter();
let unsubscribeFn = onlineEmitter(
isOnline => console.log(isOnline)
);The callback function gets called initially with value of isOnline and every time it changes after.
The vanilla version is a little long and somewhat complex due to all the bookkeeping you have to do.