Debug redux-observable with redux dev-tools
Being just another redux-middleware, we can take advantage of existing tools created by the large redux community. Arguably the most valuable & popular amongst these is the rev-tools extension that allows visibility into the lifecycle of the redux store. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
Even for such a simple example as this, where we just have two buttons -- one that loads to read stories, and one that clears them. It would still be nice to have some visibility into the Redux store. To see what actions are being fired, what their payload was, if any, and what changes it made to the state.
To install this Redux Dev Tools extension, just search for it, click here, and add it to your browser. Close and reopen Dev Tools, and you'll see it's available as a tab. Once you see this, you're ready to configure in the code. Here, you can see we already have this API middleware, which we are applying to the Redux store.
Let's break this down into multiple lines. Just before it, we can choose the compose function. When the Redux Dev Tool panel is open, it will attach this function to the window. We use that if available, and if not, you can use the regular compose from Redux. We can import that now.
To make it work with our existing middleware, we just need to call this function, pass in our middleware. If we save that and go back to the browser, now you can see the Dev Tools are working, we see this initial unit action. We can inspect the state of our store, and when we interact with our app, we can see the actions being fired here.
We can look at what state changes they made, the payload, and utilize all of the features of the Redux Dev Tools.