AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Redux toolkit chrome9/13/2023 ![]() > There's one quick question before we go. 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? If you either like it too much or not at all, I feel like I didn't do it. If I imparted that to you, I feel like I did my job. Some of that was really cool, that was a lot of work. Okay, questions about Redux? I'm hoping the feeling that you have right now is mixed. This is so much better than writing raw Redux, but if you want to, it's here. You can do that if you are a glutton for pain. I did teach a raw Redux before, so this is gonna go through the exact same pet adoption application with raw Redux. If you wanna see this exact same scenario that I did, look at this handsome bastard up there. > Even better, so if you want even more advanced stuff on Redux toolkit itself, check that out as well. > He's also about to release an advanced Redux, using Redux toolkit. If you want deeper dives on this, there's a Redux Fundamentals course from Mr. Okay, so that's Redux, that's Redux dev tools. Pretty cool, right? Pretty compelling debugging tools, so. So you can literally time travel through your user crashing their application. 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. 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. ![]() Let's say your user's application crashes, right? 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. I've not found a use for that, but that's pretty cool. And you can see the actual Stack trace to see what led you to call into that. ![]() 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. We're about to do V test for our testing framework, just use the Jest one if you're doing V test. But it's a good starter, right? This is a Jest template, but there's one for Mocha and Tape and Ava. 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. 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. ![]() 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. 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. 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. 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. But you can see step by step of what's going on. 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. So it executes that, and you see fulfilled, and I can see all the various different actions coming in, right? So let's say I change this to be dog, that's gonna dispatch an action, actually it won't. You can see all of these various different actions that are coming in from petAPI, these are generated by Redux tool. 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. Okay, that's been added here, and now if I refresh my page, I should have in here Redux pane. I think I have to go install it for Chrome, so let me go do that really quick. I left a link here for Firefox and for Chrome. So I left you a link here, go install the Redux dev tools. Let's go back to the notes here, and we're gonna go down to Redux here, at the Redux dev tool. > One last thing that I wanted to show you. Transcript from the "Redux Dev Tools" Lesson ![]()
0 Comments
Read More
Leave a Reply. |