Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Adding React Dev Tools" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Using middleware, Steve adds support for logging actions through the React Dev Tools.

Get Unlimited Access Now

Transcript from the "Adding React Dev Tools" Lesson

[00:00:03]
>> Steve Kinney: So what we're gonna do is we are gonna do a few things. We are going to one, add a little bit more to our connection to the store. And then we are going to create these container components that are gonna take the store's state and wrap the stateless components that receive all the props and we'll be able to use those in the application.

[00:00:22] And what you'll see is that we just bring in these components, they're gonna be wired up completely, and we don't have to worry about a lot happening. All right, so let's go back to this index.js. We'll create a store with reducer and the initial state. I showed you earlier that you might want to use Middleware at some point.

[00:00:44] And one of the really great use cases to see every action going through is hooking up to the redux DevTools. All right, that’s a really good, and logging into the console every time, meh. But hooking up to the DevTools I think is a much better use case for middleware.

[00:01:00] That way you can actually see all of these. So what we’ll do is we’ll just simply say const middleware,
>> Steve Kinney: All right. We'll start that out as a empty array. And we'll say count enhancers. We are actually not gonna use middleware just yet, we are actually just gonna use enhancer.

[00:01:32]
>> Steve Kinney: And then composeEnhancers is going to be really squarely, bear with me. I might just tell you right now, this is something that I copy and paste all the time. So when you see me type this, it's gonna be okay because you are just gonna copy and paste it from the docs of the React Redux library.

[00:01:55]
>> Steve Kinney: __REDUX_DEVTOOLS_EXTENSION_COMPOSE. What is this? If you have the DevTools installed, this is something that the DevTools have installed on the Window object in Chrome.
>> Steve Kinney: Otherwise, we're just gonna bring in compose and we're gonna use the compose from Redux.
>> Steve Kinney: So, if the DevTools are installed, this will be a truthy value and we'll use a special version that'll wire up to the DevTools.

[00:02:28] If the DevTools are not installed, we'll just use that regular compose function that we saw earlier, that takes the number of functions and puts them all together. All right, cool. So we've got the reducer, we've got the initial state, which is also going to add in,
>> Steve Kinney: Let me change this a little bit to three lines because my font is large.

[00:02:55]
>> Steve Kinney: And we'll use this composeEnhancers, which is either the DevTools one or just the regular compose.
>> Steve Kinney: Any middlewares that we have right now. We don't have any middleware but give me an hour and we'll have some middleware to install, as well as,
>> Steve Kinney: The enhancers.
>> Speaker 2: [INAUDIBLE] initial state.

[00:03:22]
>> Steve Kinney: Thank you. All right, cool. And I gotta spell things correctly. And we should be good to go. What I'm gonna do real quick is just start this up, and make sure nothing is broken.
>> Steve Kinney: That is obviously an old one.
>> Steve Kinney: Cool, so these are the redux tools.

[00:03:55] And you can see that the first action that's been fired is this init, which basically sets it up. There's nothing on the page here, because I actually, if we go into application, there's literally no components in there. So everything is working as expected, there are no console errors, we are good to go.