This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

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

Just like with React, Redux has a set of browser developer tools for viewing and debugging code in the browser. A small amount of code needs to be added in the application for the developer tools to work. After adding the bootstrapping code, Brian spends a few minutes demonstrating the capabilities of the Redux developer tools.

Get Unlimited Access Now

Transcript from the "Redux DevTools" Lesson

>> Brian Holt: This is as far as we're gonna take this app. This is kinda like the complete, so now everything works in varying fashions.
>> Brian Holt: It's part of its Redux. We probably would have migrated more of this to Redux if we were fully doing it, but I've taught you all of the concepts when it comes to doing that.

[00:00:22] Actually, that's not true I'm gonna teach you one more thing with Redux. We're gonna migrate our AJAX call from React to Redux to show you how to do async Redux calls. But first, I'm gonna show you Redux DevTools. So Redux also has its own set of DevTools and they are pretty fascinating, I think they're super cool.

>> Brian Holt: So, go to your store.js. Well, first, install the Redux DevTools.
>> Brian Holt: Okay so they're available for Chrome right there and they're available, as well for Redux DevTools Firefox. They're also available on Firefox too. So the nice with the DevTools is there are actually, you can actually embedded them in your program itself.

[00:01:29] So you can like run your program in embed mode and since it's all HTML, JavaScript and CSS, you can actually embed it inside of your app which means things like Reactive Native can use the Redux DevTools, because you can actually embed it in your app itself which is kind of cool.

[00:01:48] So go ahead and add that, I think I already have it and the DevTools don't work without a little bit of instrumentation of Redux. Whereas the React ones, if you're on a React page, they just work. But with Redux, you actually have to activate them within your store.

[00:02:06] So, we're gonna go to store.js real quick and we have to do something a little bit more fancy here to get the DevTools to work. We're gonna use compose from Redux as well which is going to allow us to instrument our code to use the def tools, but we don't want it to run in.

[00:02:39] We don't want it to run a node, cuz we're about to do universal rendering with our app. And so, we have to make sure that it only runs in the browser. So the way we're gonna do that is say if window is === to object, which basically means we're in the browser && typeof window.devToolsExtension.

[00:03:04] So it's saying, hey, and this person also has a Redux devTools installed, cuz not equal to undefined.
>> Brian Holt: This is a turn area, if anyone's not familiar with it. It's like if both of those things are true, then activate the devToolsExtension else
>> Brian Holt: Do nothing.
>> Brian Holt: I didn't write this.

[00:03:40] I literally pulled this out of the documentation. So I didn't write this, but this is more or less what it does. That's what this f does. F, f thing says, do nothing essentially. Return what you are given.
>> Brian Holt: So now this instruments it so if Redux DevTools, if we're in the browser and DevTools are available, then run the DevTools.

[00:04:09] If not, then do nothing. So if we come back here and I have the DevTools installed, you might be able to see right there, I have a little green electron thing going up there. So if I click on it, this will open the DevTools for Redux and now you can start visualizing all the different actions that are happening.

>> Brian Holt: So, let's actually go to the Browse All part and I'm gonna type.
>> Brian Holt: Let's see. So, I'm gonna type house in here. So think of all of the actions I distribute, I dispatch by typing house. I dispatch one for H. I dispatch one for H-O, one for H-O-U, H-O-U-S and H-O-U-S-E.

[00:05:01] So, I dispatch like five actions just by typing. So if I look at it, you can see all these actions that I just dispatched. So if I click on one of these, I can see what that looks like.
>> Brian Holt: Now, here's where this gets pretty compelling in my opinion.

[00:05:23] If I start clicking back right here, it's gonna start walking backwards through time of all the action I just dispatched. So if you watch here in the background, more shows are going to start showing up.
>> Brian Holt: I can go backwards and forwards through time.
>> Brian Holt: This is called time travelling debugging for that reason.

[00:05:46] You're going backwards and forwards through time, and kind of seeing what's happening. So, it's we playing all these different actions back and forth. I can even as far and come in here and say, you know what? I don't want this one to happen, so I just don't apply that action anymore.

[00:06:01] And now it's cutting that out of the history, so you can see what that would look like without that action and then you can add it back in,
>> Brian Holt: So skip that one, skip that one, skip that one,
>> Brian Holt: So if I skip all the actions and only apply the last one.

>> Brian Holt: And then they'll end up with that one, because this action was dispatch house. You can actually see what the action looks like right there. SET_SEARCH_TERM was the name of the action and the searchTerm was house, cuz it sends the value of, the entire value every single time.

[00:06:47] It's not just sending E on that action, it's sending the entire word house.
>> Brian Holt: Any questions about that? Go ahead.
>> Speaker 2: So not about that.
>> Brian Holt: Okay.
>> Speaker 2: It's a broader question. I'm wondering if you have recommendations about good practices for writing ReactJS programs like documentation or books, or those sort of things.

>> Brian Holt: They're docs are phenomenal, so.
>> Speaker 2: The React docs themselves are.
>> Brian Holt: Yeah, the React docs, the-
>> Speaker 2: I think they're asking for something a little more high-level on that.
>> Brian Holt: A little bit more high level?
>> Brian Holt: This very course itself, just kidding.
>> Speaker 2: Yeah.
>> Brian Holt: [LAUGH] So the question is what resources do I recommend?

>> Speaker 2: Yeah, let's go with that.
>> Brian Holt: I think about that for a second. What do I get like, the next thing I react is this a pretty small library like I evoluted to earlier and I've pretty much all of the must do best practices. Beyond that, a lot of it is just up to you, your own opinion.

[00:08:08] Maybe go in and dig through some public open source React projects like, for example, the mobile website of Reddit. It is totally available online. The entire code base and it's all written in React, and I think some of the later revisions is actually somewhat well written too. So, I think that's a place you could check out.

>> Speaker 3: Like the Brave web browser is completely free and open to us, and that's in React Native and React.
>> Brian Holt: Electron.
>> Speaker 3: Electron.
>> Brian Holt: Yeah, so that's a good one to check out as is the Firefox DevTools. They're all written in React and Redux. It's debugger.html. One can check out that, that's pretty well written.

[00:08:52] I mean, Lin Clark and her team that write it and James Longster. They're all brilliant people. So.
>> Brian Holt: I don't know if I have any better suggestions than that. Anything that Dan Abramov wrote, definitely. That man is gospel.