Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Debug redux-observable with redux dev-tools

    Shane OsbourneShane Osbourne

    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

    reduxRedux
    3 - 4
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss