This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Redux Dev Tools" Lesson
[00:00:00]
>> Brian Holt: So I've redone all this stuff and by the way you now understand everything about Redux or at least heard about Redux. There is a great talk about what's simple and what's complex versus what's easy and what's hard. Redux is simple in the sense that there's not a lot to it, right?
[00:00:23] You can actually write Redux in about 80 lines of code. It's really just storing an object and giving it back at appropriate time. So it's simple effect that there's not a lot to it. But it's damn hard, right [LAUGH] dealing with reducers and thunks and all this is an entire cycle, it's hard.
[00:00:42] So if it feels hard that's because in my opinion this is hard. And in some places, perhaps unnecessarily hard for state management. But, so I guess I'm trying to say if you're sitting there feeling this is hard and I don't fully grasp it, I'm giving you permission to feel that way, right?
[00:01:00] It's okay that you feel that way, for sure. One more thing. I wanna show you one of the big advantages about Redux which is this little tab right here. The Redux Dev Tools. So if you are on Firefox, just Google, Firefox Redux Dev Tools. Same thing for Chrome, Redux Dev Tools.
[00:01:28] And if you're on Chrome, then Chrome will work as well, Chrome Dev Tools. They had it on Safari, I think they stopped supporting that one, I'm not actually sure. The nice thing about the Redux Dev Tools is you can actually embed them inside of your application, because it's all just React.
[00:01:47] So if you're on something like React native or something like that, you can still have the Redux Dev Tools. You can still have some sort of extension for it. Anyway, so I have it installed here via Firefox. And I can see here, I can look at all of the actions that have been dispatched to my,
[00:02:09]
>> Brian Holt: To my store, so I can look here, I did an init right there. And I can see the state at this point. I can see that it Seattle Washington, no animal, no breed, and no breeds, right? And then I can kinda walk through this over time. So there's the init.
[00:02:28] Set animal, cuz I've changed it from animal though. In fact, let's just start over so you can see well, how this works. So, no matter what, this at at init action will be dispatched, that's when it's setting up your default state which is why you have to settle those defaults like I showed you previously, right.
[00:02:46] Then, I'm gonna change it to dog. So we called SET_ANIMAL and then immediately it calls SET_BREEDS, right? Because it goes out to the API and comes back. So that's why there's two different actions there. You can see what the action looks like. It'll actually give you a DIF right here, which is quite nice, but you can actually see the raw action up here as well.
[00:03:04] And then you can see the state afterwards.
>> Brian Holt: Which is compelling, right. Pretty cool. So if I change this to cat. Again, you will see that. If I change this to calico or something like that. You'll see that it's getting that and you can see the state at this point in time.
[00:03:27] Which is what we'd want to see. If I change this to be San Francisco, notice I'm getting a location change every single time that I type, right. Because it's dispatching an action every single time that I type, which is fine. They can see this actions are like half tight, let's do something kind of fun here.
[00:03:52] I'm gonna pull the slider here and I'm gonna start watch San Francisco up here. Let's start going backwards in time, this is call time traveling debugging, right? Which is extremely compelling for debugging things, cuz you can go backwards and forwards in time to figure out what broke in that process.
[00:04:18]
>> Brian Holt: And due to the nature of modular transactional actions, we can do that.
>> Brian Holt: So and I can actually like you notice that now Seattle's there. And now I can go back and I can walk through. And I'll unselect the breed. I can change to different dog, right?
[00:04:39] I can actually just have it play through all the way. So you can see what I was doing over time.
>> Brian Holt: And that's pretty cool too, right?
>> Brian Holt: As you might have imagined, time traveling is very useful for debugging, cuz you can actually identify the exact moment in time when things break.
[00:05:04] Really what this is actually doing is its actually just removing all the actions and replaying them to get you back to that state. Now you can actually even do, lets just refresh this again. Let's say I changed this to dog, okay? And then I have maybe change this from like bloodhound and then delete this.
[00:05:31] And then change this to maybe something else like Black Russian Terrier, okay? So I have this Set_Breed, Set_Breed, and then between the two I have the Set_Location, I was like. I wonder what happens, like I want everything to be the same but I don't want that Set_Location to happen.
[00:05:51] I can actually say right here, hey, you know what, skip that.
>> Brian Holt: Outside on the separate, I wanted to do it on the location, this one. So it'll be like that action never happened, but everything else happened. So notice that like the breed still here is Black Russian Terrier but I skipped the part where I deleted Seattle, Washington.
[00:06:17] So you can actually remove things in and put them back in and kind of see how that shakes out otherwise. Now an experiment that I've previously run is like, I wanna see how customers are interacting with this. So whenever a customer errored out of my webpage, I dumped the ledger from Redux and just sent it off to my error server.
[00:06:39] So that I could actually see how customers were crashing my application, right? So that there's some idea around being able to see exactly how customers are interacting with it. Because you can just look at the ledger of how they're interacting with Redux. And you can see the evolution of your app over time.
[00:06:57] Always be careful with tags, cuz there's definitely GDPR and privacy issues around that. But it is possible. Okay, I can dispatch actions on the fly. There's a bunch of stuff you can do here. But the last one I wanted to show you that I find to be pretty great.
[00:07:20] Right now I have my state, which has no animal, right? And I want to write us a unit test to test to make sure that my change animal works the way that I anticipate it. So I'm gonna change this to dog. And that worked the way that I wanted it to, right?
[00:07:39] So I look at this right here and it went from being nothing to being dog. This works the way I anticipated, right? I feel good about that. So over here where it says test. I'm gonna click on that. It actually generated a unit test for me that I can just copy and paste into my unit tests.
[00:08:06] Test that write themselves. That's pretty cool, right? And maybe you're not using Jest, maybe you're using, Mocha, Tape, Ava, it has several different templates here for you. So all I have to do is copy and paste this entire thing. Just dump it into my Tests directory, and I am done.
[00:08:24] So this concludes Redux. You now understand the basics of Redux. There's more advanced state management stuff you can do, again with Sagas. It generally has to do with more like orchestration of asynchronous data sources. The synchronous stuff is just this. You can add additional middleware, so it's like the apply middleware stuff.
[00:08:48] There's like, logging middlewares and error handling middlewares and other things like that, but this is the core library of Redux that you've learned today.