Preventing multiple observables from firing from Redux-Observable
Image by Brett Hondow from Pixabay
A basic example shows how to do "ping/pong", which was simple to implement.
But the problem is that, when you ping more than once, multiple observables are created.
After hours of struggle, I asked on the official Gitter page for Redux-Observable.
I will share what's done in public (Learn in Public) as the Gitter conversation is private.
Below shows multiple "ping/pong" actions being dispatched as you click on "PING" button.
The code that generated the mess above is shown below.
For being a new RxJS (, which is a prerequisite for redux-observable) user, I couldn't figure it after hours of reading documentation and playing around.
Kevin Ghadyani generously spent time to review the code and provide a solution for the issue.
1️⃣ uses switchMap, which implicitly cancels previous observable. So when PING button is clicked while the PING action is already dispatched, previous timer observable is canceled and a new one is started.
Kevin's forked Sandbox shows the fix.
Kevin also shows how to accomplish the same task using takeUntil.