Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Redux Tools" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Brian spends a few minutes demonstrating how to use the Redux dev tools for Google Chrome. Just like with the React tools, the Redux tools are an extension. They also require some middleware to be injected into the redux.createStore() method in the application.

Get Unlimited Access Now

Transcript from the "Redux Tools" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: Davide asked an interesting question. We're not using Redux to basically address our routing and that's true. We're using React router instead of address or routing but you can interference with do it. Actually the abstraction makes more sense to me to have Redux handle your routing. And what they actually do is, I think it's called Redux React Router, is the name of the library.

[00:00:28] It's maintained by the same team that does both React Router and Redux. The difference being is that, you fire Redux actions to be able to change routes. But, what that really is doing, it's a thin layer on top of react router. So, it's actually react router still doing all of your routing.

[00:00:44] There is just like a kind of a pass through using Redux. And if that makes more sense to you, to be honest it makes more sense to me than go off and and do that, you're welcome to. They end up being pretty similar in any way. So, that's a good question.

[00:01:00] Any other questions before we move on to Redux tools?
>> Brian Holt: All right, feeling pretty good about that. Just like we had react tools, we're going to use Redux tools. So go ahead and Google search for Redux dev tools.
>> Brian Holt: And there should be, I believe this one is actually only on Chrome, this one right here.

[00:01:32]
>> Brian Holt: Looks like something like this, right? Go ahead and add that to Chrome. I know a Firefox's is on their roadmap, it's just not there yet so, sorry about that. Okay. Unfortunately, the Dev Tools in Redux are not quite free. Remember we were talking about Middleware, so you actually have to give Redux a Middleware to be able to hook into the Redux.

[00:01:57] So that's what we're gonna go do real quick. Is we're going to go to our store
>> Brian Holt: .JSX
>> Brian Holt: And here we're going to make our create store a little bit more complicated. But keep in mind like for production code, this is actually all you need and the other thing is you actually don't want to ship out Redux dev tools to everyone cuz it slows Redux down ever so slightly for no good reason.

[00:02:28] So here we're going to do rootReducer, we're going to do initialState, and then we're going to do redux.compose.
>> Brian Holt: And you're going to ask me what does redux.compose do and what is everything doing here. To be totally transparent and honest, not super sure what's going on here. This is literally I just copied and pasted from the docs to get this to work.

[00:02:54] [COUGH] My conjecture here is that
>> Brian Holt: You're composing multiple middlewares together. It's essentially what you're doing. So first thing you're gonna do is we're eventually going to be get to universal rendering. I think it's actually literally right after this. No we're going to do tests then we're gonna do universal rendering.

[00:03:20]
>> Brian Holt: Actually maybe we'll do universal rendering first because I have a lot of stuff to cover and not enough time. So we're going to do the typeof window.devtoolExtension is not equal to undefined
>> Brian Holt: Question mark, this is the turn area. window.devTool extension execute otherwise F.
>> Brian Holt: So again this is actually just what I copied out the, not exactly sure what all this is doing but suffice to say I just copy and paste it out of the docs, good enough.

[00:04:14]
>> Brian Holt: So this is basically exposing some hooks to Redux dev tools to be able to use.
>> Brian Holt: So go ahead and save that. That's it, that's all that you have to do. And they have Chrome dev tools. If you've been like me and been using just the file protocol to do this, Redux dev tools actually do require that you do have an HTTP server running.

[00:04:42] So just to recap here, I'm gonna split my terminal here.
>> Brian Holt: I'm gonna go to my project, which is talks/bundler/complete project. Okay, and then here I did an npm install --g http-server. I already have it, so I'm not gonna install it. I'm gonna do http-server -p8080./. So that'll get me my server running.

[00:05:22] Okay, and to come over here to here and I'm gonna say local host 8080.
>> Brian Holt: Okay so it should be relatively the same thing. I might have broken all my images, but we'll see about that in just a sec. No I didn't, good job Brian. Okay, no favicon.

[00:05:47] Don't care. So, let's go do some Redux debugging now. So you can do one of two places you can do it here and Redux. This should work? Yep. You can also do up here. That works too. Either one of those fine. I'm going to use it up here because I think it'll be easier.

[00:06:04] So I'm gonna close this and use this. So there's an app at in it. That's what the action that Redux fires to be able to see, sorry, in order to initiate your Redux store. And there's a bunch of different tools here. I'm going to switch over here to the left so I can see my search box.

[00:06:31] And we're going to switch to S video. And there's also some settings here you can change. Right now I'm using inspect monitor. You can also use chart monitor. There's a bunch of these different monitors. What I want actually wanna use, I wanna use the chart monitors. Actually, I do wanna use this one.

[00:06:52]
>> Brian Holt: And I'm gonna type here, so I'm gonna type House right here. Okay. Come back here and I can see all the actions that I fired, right, so started with h H O H U H U S E. But let's see some why this is compelling. So one it's interesting to see your actions and everything you're firing.

[00:07:14] But now I can start pretending I didn't fire off these actions by disabling them. And I can disable and re-enable these actions which is pretty compelling, right? This is called time traveling debugging. So I can go backwards and forwards in time to see exactly what happened and that's actually let's see what that really looks like.

[00:07:36] That's not what I wanted. Come here to settings. I want this to be bottom monitor to be slider monitor. Okay.
>> Brian Holt: So now I'm gonna do this, go to the bottom one.
>> Brian Holt: What are you doing? I want my slider.
>> Brian Holt: Maybe it's log monitor. I get so confused, which ones which.

[00:08:10]
>> Brian Holt: Bottom one. Nope, still the wrong one.
>> Brian Holt: Anyway.
>> Brian Holt: So this is one of the other monitors right here you can see all the different actions and like the different times between them. And you can actually inspect each one of them you can see what the action looks like.

[00:08:37] Right. Value type, right? What that actually looked like. What the diff was, right? So, I went from ho to hou, and what the current state is.
>> Brian Holt: So hopefully you're seeing why this is compelling. Basically, you can enable and disable actions to see how your state is evolving over time.

[00:09:00] That's really powerful because if you have some complex bug that steps through a bunch of state to be able to get where you were you can start like enabling and disabling these different actions to see what's actually happening. I'm really frustrated I can't get the slider one to work.

[00:09:24]
>> Brian Holt: Maybe you have to close it. I don't know. Try again.
>> Brian Holt: There we go. This is what I wanted to see. So now I can say house right. But now I can actually like time travel which is kind of fun, right. So I can step backwards and forwards through my different, like look at just the search bar up here, right.

[00:09:47] You can see the letters being taken out and put in. Now if that doesn't impress you, I don't know what will because it's super impressive to me.
>> Brian Holt: Right, you can actually click the Play button, and it'll show you what happened over time. Come on, pretty cool.
>> Speaker 2: Does that match the time setting to the [CROSSTALK]

[00:10:11]
>> Brian Holt: I think so, let's try. So let's refresh the page to get a look at. So I'm gonna so type kim really fast late at the second and my.
>> Brian Holt: Nope, it doesn't.
>> Speaker 2: Okay, still.
>> Brian Holt: Still that would be pretty cool. You should make a pull request.

[00:10:37] [LAUGH] So while this is only available as a Chrome extension in Chrome. Luckily the team as actually just exposed this as a node NPM module, so you can actually just build your debugger straight into the web page. And then, if you have it like embedded in your iPhone app you can actually debug get straight on the iPhone app just using native reactor views as well That's a possibility.

[00:11:03] I just like the Chrome extension because it's super easy. I don't have to add any code, well very little code to my app and it just works. But if you want to be able to use the debug monitors, that's what they're called, is monitors, in weird places, well, we could use it on our TVs right, because we're running JavaScript to show, like on your PS4 right?

[00:11:24] That's just react in JavaScript there, so you could do it there as well.
>> Brian Holt: Any questions about the Redux Dev Tools? There's a lot more to the Redux Dev Tools and I'll let you kind of toy around with them on your own time. Suffice to say that they're pretty impressive, I think.