Check out a free preview of the full Intermediate React, v2 course:
The "Redux Devtools" Lesson is part of the full, Intermediate React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces some of the features provided by the developer tools, including the ability to walk through state, and built-in unit test integration.

Get Unlimited Access Now

Transcript from the "Redux Devtools" Lesson

[00:00:00]
>> Brian Holt: Let me show you the part about Redux that's actually very, very compelling in my opinion. So I want you to go install redux dev tools.
>> Brian Holt: So I have Firefox, so that's here, I've already installed it but there's also Chrome up here as well.
>> Brian Holt: Okay, I have those installed, so I'm gonna go back to my project here, and I'm gonna open the redux dev tools.

[00:00:33]
>> Brian Holt: So you can see here there's an INIT object or an INIT action that happens but let's say if I delete all this at once, there's a change location action you can see there right? And you can see that there was an action that changes from CLWA to nothing, so you can see the dev.

[00:00:52] You can see what the action looks like, you can see what the state was, or the current state is like. So the location is empty and the theme is dark blue. And I could start typing in here, so they'll be one action for every keystroke right? So Salt Lake City, UT right?

[00:01:15] And you can see here,
>> Brian Holt: You can kind of go forward, but check this out. I can actually time travel with redux, right? So, you can see here in my timeline here, if I started clicking back, I start walking backwards through my stage changes right? And then I can go forward again.

[00:01:39]
>> Brian Holt: So that's what cool about redux, right? It allows this time traveling debugging. So I can actually just go all the way back here, and I can just click Play. And then it's gonna just start doing everything that I just did back to me.
>> Brian Holt: And you know what, we should probably skip that one.

[00:02:00] So you can say, Skip.
>> Brian Holt: Right, and so notice it will actually just go through and skip these and then it'll just jump to the next one.
>> Brian Holt: Pretty compelling, right? So how does this work? Well, this is called transactional programming, right? Each one of these actions is technically one transaction, right?

[00:02:23] And the thing about transactions is you can just roll back to the beginning and replay the transactions, right? And you can just not do some of the transactions, right? So what this is actually doing when I say skip, right? It's just going through and saying okay, just don't apply that one, and then reapply all the other ones.

[00:02:41] Same thing here, if I come and change the theme, I can go down here and see the change theme and see what that looks like, which is pretty cool as well.
>> Brian Holt: One more pretty cool thing here. So let's say I have this right here, and I go here and I can click on this thing that says Test right here, and it generated a unit test for me, right?

[00:03:12] I can actually literally copy and paste this Into my unit tests and it'll just work for me. It's really generating user tests for you. User test? I don't know why I keep saying that unit tests for you. So this is Jest but it also does Mocha, Tape, and Ava as well.

[00:03:37]
>> Brian Holt: So the dev tools are pretty amazing, I saw one company what they would do if a user had a crash, they would dump all the actions that the user committed and send it off to the air logging service, so they could literally step through everything that their user was doing to cause the crash.

[00:03:55] Pretty cool, right? Pretty compelling. Again, with that kind of stuff you need to be really careful with GDPR, but nonetheless pretty cool.