Use case: Call a function every minute (60000 ms) that dispatches store action to fetch lastUpdated
status of items, which upon response and filtering, updates the store, and updated store is read as an observable and displayed in the view). This needs to happen for as long as the web app is open (so indefinitely).
Currently, I'm using this:
this.refreshDate = window.setInterval( () => this.store.dispatch(new FetchLastUpdate()) , 60000);
And when view is destroyed/dismounted, I delete the interval as so:
if (this.refreshDate) { clearInterval(this.refreshDate); }
Is this efficient/effective, or is it troublesome?
Why would I want to use an RxJS polling strategy like:
interval(60000) .pipe( startWith(0), switchMap(() => this.store.dispatch(new FetchLastUpdate())) );
Or
timer(0, 60000) .pipe( switchMap(() => this.store.dispatch(new FetchLastUpdate())) );
TL;DR: window.setInterval()
vs. RxJS timer()
/interval()
There is great benefit to using RxJS functions to set an interval or perform polling, these benefits are explained in the selected answer but also in comments, but it is concluded (by discussions in the comments) that for the very simple requirement defined in the "Use case" section at the beginning of this post, it is unnecessary to use RxJS, and in fact if you are not using RxJS in any other part of your program, do not import it just for this, however in my case, I had already imported and used RxJS elsewhere.
RxJS timer() operator is a creation operator used to create an observable that starts emitting the values after the timeout, and the value will keep increasing after each call.
There're are basically two ways: call unsubscribe() on the Subscription object returned from the subscribe() call . use an operator.
Advantage of RxJS:
Laziness
You can create your Observables and until you call subscribe
nothing is happening. Observable = pure function. This gives you more control, easier reasoning and allows for next point...
Composability
You can combine interval/timer
with other operators
creating custom logic very easily in unified way - for example you can map
, repeat
, retry
, take
... etc. see all operators
Error Handling
In case of an error you are responsible for calling clearTimeout/clearInterval
- Observables are handling this for you. Resulting in cleaner code and fewer memory leak bugs.
Of course anything you do with Observables you can also do without Observables - but that's not the point. Observables are here to make your life easier.
Also note that interval/timer
are not good observable factories for polling because they do not "wait" for your async action to finish (you can end up with multiple async calls running over each other). For that I tend to use defer
and repeatWhen
like this:
defer(() => doAsyncAction()) .pipe( repeatWhen(notifications => notifications.pipe(delay(1234))) );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With