This course has been updated! We now recommend you take the Intermediate React, v5 course.
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.