Install Development Tools for Preact

Configure Webpack 2 and Babel for use with Preact

Create a Hello World App with Preact

Define Functional Components in Preact

Define Stateful Components in Preact

Use State and Props in the Component Render Function

Use Link State to Automatically Handle State Changes

 Reduce the Size of a React App in Two Lines with preact-compat

Handle Simple Routing with preact-router

Integrate react-router with Preact

Integrate Redux with Preact

Use Redux Dev-Tools with Preact

Up and running with Preact

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.

Course

Up and running with Preact

Use Redux Dev-Tools with Preact

Share this video with your friends