Use Redux Dev-Tools with Preact

[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.