Use Redux Dev-Tools with Preact

Shane Osbourne
InstructorShane Osbourne
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

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

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

egghead
egghead
~ just now

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