Redux Dev Tools

[00:00:00]
>> One last thing that I wanted to show you. Let's go back to the notes here, and we're gonna go down to Redux here, at the Redux dev tool. So I left you a link here, go install the Redux dev tools. I left a link here for Firefox and for Chrome.

[00:00:20]
I think I have to go install it for Chrome, so let me go do that really quick. So I'm gonna click Add to Chrome here. Okay, that's been added here, and now if I refresh my page, I should have in here Redux pane. So I'm gonna click on that.

[00:00:42]
This is probably one of the other most compelling parts about Redux, is I can actually see everything happening inside of my Redux via this, right? So right now, I'm looking at all the actions that are coming in. You can see all of these various different actions that are coming in from petAPI, these are generated by Redux tool.

[00:01:05]
So let's say I change this to be dog, that's gonna dispatch an action, actually it won't. Really, it does. Okay, here we go. Yeah, cuz it's changing the breed. So it executes that, and you see fulfilled, and I can see all the various different actions coming in, right?

[00:01:24]
And if I click Submit, you can see it calls searchParam'all, then it does unsubscribing and pending and fulfilled and a bunch of stuff like that. But you can see step by step of what's going on. What's cool about this, though, is I can start stepping back in time Because what it's doing is it's basically just reapplying or un-applying all these various different actions.

[00:01:53]
So if I go back here, I can actually click Play, and it'll just go at a rate and I can watch things playing out in my, Time traveling debugging is what that's called. I can always go in and I can reset things, I can see what the actions looked like, so you can see what was in the payload.

[00:02:20]
This gives me a bunch of meta information of, when did it happen, what was the query, what were the arguments, what was the requestId? Did it work? Did it not work? One of my favorite things here, so let's go look at one of them that we created, like the searchParams/all one that I did, this one.

[00:02:40]
First of all, you can do things like jump to this one, you can also say, hey, what would happen if this action didn't happen? You can click Skip, and it'll reapply everything and skip that action, it's kind of interesting, right? And then another thing here, I can click Test, it'll actually generate a test for me that I can just copy and paste into my code, which is pretty cool.

[00:03:08]
I like when my tools write tests for me, right? Now, I'm gonna argue, this is a ridiculous test, look at how much stuff it's trying to put into my test. But it's a good starter, right? This is a Jest template, but there's one for Mocha and Tape and Ava.

[00:03:28]
We're about to do V test for our testing framework, just use the Jest one if you're doing V test. There's a state, there's a difference, so you can see, what was the delta between the two? So I went from animal to being nothing to being dog. And you can see the actual Stack trace to see what led you to call into that.

[00:03:51]
I've not found a use for that, but that's pretty cool. And that's it. So one thing that I have seen people do, which I found very interesting and a compelling use case of, what the Redux toolkits can do for you or just in general Redux. Let's say your user's application crashes, right?

[00:04:12]
What I've seen people do is dump their entire history of Redux, and then they'll send it off to Track js or century or something like that. You can then take that dump and you can put it into your dev tools, and you can literally go piece by piece of what your user did to cause the crash.

[00:04:31]
So you can literally time travel through your user crashing their application. Pretty cool, right? Pretty compelling debugging tools, so. Okay, so that's Redux, that's Redux dev tools. If you want deeper dives on this, there's a Redux Fundamentals course from Mr. Kinney himself, I strongly suggest that.
>> He's also about to release an advanced Redux, using Redux toolkit.

[00:05:06]
>> Even better, so if you want even more advanced stuff on Redux toolkit itself, check that out as well. If you wanna see this exact same scenario that I did, look at this handsome bastard up there. I did teach a raw Redux before, so this is gonna go through the exact same pet adoption application with raw Redux.

[00:05:28]
You can do that if you are a glutton for pain. This is so much better than writing raw Redux, but if you want to, it's here. Okay, questions about Redux? I'm hoping the feeling that you have right now is mixed. Some of that was really cool, that was a lot of work.

[00:05:49]
I have mixed feelings about it. If I imparted that to you, I feel like I did my job. If you either like it too much or not at all, I feel like I didn't do it. It's a trade off, right? There's definitely trade-offs to using Redux, that's really what I want you to see Okay, any questions about Redux before we move on?

[00:06:11]
>> There's one quick question before we go.
>> Yeah, sure, go ahead.
>> Could you explain about the action type and when we would use it?
>> Sure, So let's take a look at our Redux application one more time. We're gonna open the dev tools, we're gonna go back into Redux.

[00:06:34]
So what you see here, they're called the Redux action type. Let's look specifically at the searchParams/all, because that was one that you and I made together, right? So if I look at the action here, you can see that there is a type here called searchParams/all. So just to describe to you where that comes from, it comes from searchParamsSlice.

[00:06:56]
It comes from this name, right? So if I call this searchParamsLol, that would be the name/the name of the reducer, which is all, right? So that is why this one is searchParams/all, searchParams/all. So it's generated from the the name of the reducer that you have, as well as the name that you gave the slice overall.

[00:07:23]
We used to have to name these action types ourselves, but with Redux toolkit, it generates those names for us. What's the point of the type? The type is just so that Redux knows where to send your reducer, like which reducer to send your thing to, that's the entire point of the type.