⚠️ This lesson is retired and might contain outdated information.

Debug redux-observable with redux dev-tools

Shane Osbourne
InstructorShane Osbourne
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 2 years ago

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.

egghead
egghead
~ 6 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today