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

Brian demonstrates using the Redux Dev Tools to time travel debug, auto-generate tests, modify state, and see actions. A student's question about how the action is dispatched to the useReducer hook in the action is also covered in this segment.

Get Unlimited Access Now

Transcript from the "Redux Dev Tools" Lesson

[00:00:00]
>> So, one of the cool things here that I quite like about this approach is, if I change this to be dog, and I submit, and I go look at Luna, and then I go back to the homepage, notice that dog is still here. That's because now we have a universal store that's surviving between page loads, whereas before everything was being stored in the component state, so that means it's going to survive between payloads.

[00:00:28] We could have done this with React Context, as well, and that would have been great. And that's Redux. Hopefully, this was an adventure for you. Hopefully, you can see the value in this. So, let's go ahead and take a look at the Redux dev tools. You can install them, and just search for Redux dev tools, and you can start from your favorite extension, or your favorite extension store.

[00:00:56] Now I can see all of the actions being submitted here. In fact, let's just refresh the page, you can see there's an Init action here, which happens, and that's cool. And I can see what the action was, I can see what the state was. There's a lot of information that will show me.

[00:01:10] And then, if I submit this to be cat, notice I gotta change breed, and a change animal, and I can look at the action and what they looked at, and all that kind of stuff, that's great. So, let's just type in here, delete, right? And I cited a change location that deleted all the Seattle, Washington, that showed me the diff.

[00:01:30] But what's kind of cool about this is, you can actually say, hey, what happens if I skip this? So, let's change this to be medium. Yeah, we have a bug there, that's okay. I wanna see what happens if everything else happen the same way, but I wanted to skip what I deleted the location.

[00:01:55] Well, the Redux dev tools allow you to do that. And I can say, skip that. So, it keeps everything else, but it goes back in time and then replays all those actions in order. This is called time traveling debugging. So, I can actually say, you know what? Come back here, jump back here, what does this look like at this point in time?

[00:02:15] And see if this jumps back to this one where it was medium orchid, and then I can jump forward to say, okay, now jump forward again. Okay, now play, slowly over time, there's a bunch of really cool time traveling debugging things you can do. One of the cool things that I've seen people do is, if someone's app crashes, it'll automatically dump the Redux state and send it to the error logging service.

[00:02:38] Obviously, there's PII kind of concerns there, so, you wanna be careful about that. Like GDPR, that kind of stuff is what I'm talking about. But then, the developers can step by piece by piece of what the user did to cause the app crash, which is pretty cool. One more thing I wanted to show you, if I click here on breed, I can actually click Test, here.

[00:03:01] You will, actually, automatically generate a user test or a unit test for that particular action, from going from that state to the next state for you. I mean, things that generate tests for me, I'm a big fan of that, right? And there's several templates, there's just Tape, Ava, and so on and so forth.

[00:03:23] So, yeah, it'll generate unit tests for you. Cool, any questions about Redux? I think that's all we're going to talk about today for Redux, we talked about the dev tools. If you want a deeper dive, definitely, check out Steve's course on it, it's awesome.
>> When we dispatch, how Redux gonna know the right reducer to use?

[00:03:53]
>> So, how does it get from me dispatching it, to the root reducer handling it? So, when I call dispatch, so, I use dispatch here, gives me back a function here called dispatch, which then connects me to Redux, right? So, when I say change animal and I dispatch that, that has been handed over to Redux, which then hands it over to the route reducer.

[00:04:17] So, Redux takes it in via this dispatch function, and then hands it to the route reducer. So, you don't call it, Redux calls the route reducer for you. There's still kind of a bug in this implementation. What I need to do is, I need to check that the animal didn't change, I didn't check that.

[00:04:33] But we need to check that the animal didn't change here in that handleAnimalChange, cuz those change events will still happen. So, I'd have to say, if animal changed from the last time you see it, then do that, but I'll let you do it on your own time.