This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use Redux Dev-Tools with Preact

    Shane OsbourneShane Osbourne

    Preact and Redux is a great combination, made even more so by the amazing dev tools extension that can be installed into both Chrome and Firefox. In this lesson we’ll see how to enable it and how it works seamlessly with Preact. https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

    reactReact
    reduxRedux
    ^3.0.0
    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

    00:00 We have this application where on page load, it looks at this part of the URL, constructs an API call to GitHub, and renders this card using the avatar and the user's name. Now there are a couple of things happening as the page loads there. It will be really interesting and useful for debugging if we could see a list of all of these things that have happened.

    00:20 We are using Redux inside this preact app, so let's add support for Redux dev tools.

    00:25 First, we'll need to import compose-function from Redux. To make this more readable, we'll move this object here to the initial state.

    00:38 Now we'll go to the GitHub page of the Redux dev tools extension, and we'll scroll down to the advanced section. We'll copy this piece of code here. We need this advanced way of configuring it, because we're using middlewares in our Redux store. Paste that in here, and instead of calling applyMiddleware directly here, we'll wrap it in compose enhancers.

    01:04 If we save that, go back to the browser, reload the page, you can see that we've got the Redux dev tools experience, where all actions are logged as well as changes to the state tree, and the diff in between changes. That's it, there's nothing else special you need.

    01:23 If you're already using Redux with preact, you add this block of code here, which is checking for the existence of the dev tools. If they don't exist, it just falls back to the regular compose from Redux, wrap it around the applyMiddleware call, and you're ready to go.

    Discuss

    Discuss