Redux Dev Tools

[00:00:00]
>> One of the really powerful things that I would recommend installing, either Chrome or Firefox, whichever one makes you happier, are these Redux Dev Tools. The Redux Dev Tools adds an extra pain to your developer tools that allow you to kind of see what's going on in your Redux store.

[00:00:23]
So, this is one of those things where, before we're talking a little bit about like doesn't react come with a use reducer and I think there probably are plugins that will hook the use reducer up to these tools as well. But this is where we start to see like some of the tooling around Redux is super helpful for some of the more advanced cases that we'll see.

[00:00:40]
I mean, in this workshop, we won't even get to some of the like, fancier ways of managing async state like Redux observable and stuff along those lines. But there is a rich set of tools around this but very lightweight cases, use reducer is fine for more kind of production grade cases, you might want to consider using Redux you might end up there anyway.

[00:00:59]
I find myself almost always, as soon as the application grows to a certain size, going ahead and I'm finding myself needing to use the tools, to use Redux instead of the user reducer. So, these Developer Tools basically when you install it in Chrome, so if you don't have this installed in Chrome or Firefox, a lot of this will be kind of a, something we won't necessarily see.

[00:01:23]
But it basically puts this property on the window object. So we're gonna say, hey, if on the global window object, you have this read of Redux Dev Tools extension, then go ahead and call it and it's going to provide us an enhancer. So, we can actually say we can pull this in to our application.

[00:01:48]
Actually pull it into our store. We'll say const enhancer in this case. Great, and then if I did everything right, should be able to open up my Dev Tools and go to Redux. And see that I now have this set of tooling around everything is happening in my store, right now, we haven't like wired up any of our actions so, you can see that an event that we saw before.

[00:02:29]
I can see the current state in any given point, anytime an action is dispatched, I can look at the action, very much like we're doing that log enhancer and that log reducer or log middleware before. I can actually, every time the state changes, I can see the diff for how it changed.

[00:02:45]
There are some other cool tools around here, I can load in a JSON object, full of state for my application to create a place I'm trying to debug. I can also export based on the current state of the application, I can export it to a JSON file as well.

[00:02:59]
I can dispatch actions down here, and we don't have any actions yet, but I actually time travel through my application. If I want to dispatch a bunch of actions I want to rewind, then I can drag this bar back and I can go to previous states of my application, and I can play it forward again.

[00:03:15]
So, it's a really powerful set of tools that you can use in the application and it's frankly, just an enhancer, right? That we're kind of passing in there as well. And if you need to compose with other enhancers, you can absolutely do that as well, but it's there for you to kind of pull in.

[00:03:34]
If you use Redux toolkit which we'll see later, it is there for you kind of baked in automatically. For any of these things, if you don't wanna to ship them to production like even with our log enhancer from before, to answer a question we got in the chat, you can do like alright, if node n equals development, add these things in, otherwise, if it's production, don't add them in.

[00:03:58]
One of the fun things that you will see, though, if you have the Redux Dev Tools installed is a lot of times you'll just see it shipped to production you can actually like inspect applications you're using, they use Redux as as well. So, that's a fun, fun thing that you can do is like rewind, other production apps as well if they have these tools installed, but now we have it in place.