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

Brian demonstrates the Redux Dev Tools. Every dispatched action will be visible under the Actions tab. The Redux Dev Tools also allow for time-traveling debugging which gives developers the ability to step backward through each action and see the state of the application at that point in time. Jest, Mocha, and other testing template can be exported for each action to create unit tests.

Get Unlimited Access Now

Transcript from the "Redux Dev Tools" Lesson

[00:00:00]
>> One last thing here, I want you to go install the Redux dev tools. So here I have them linked or you can just Google it, for Firefox and Chrome, the Chrome one will work on Edge. And I don't, actually there might be a Safari one for Redux, that one I don't know, you'd have to check.

[00:00:24] But certainly for Firefox and Chrome, So then happened to your page once you got that installed, I already have installed but you just add it here, right? And I don't know Methusellah but Timdorr is he's the maintainer React Redux, really smart guy. Okay, so now I can open my dev tools here and I can open my Redux Dev tools right there.

[00:00:57] And what's really cool about this is now I can see every single action that's been dispatched and I can see it in real time. So if I like, let's go back to the homepage, if I do animal and I change that to bird, right you can see here my, the change animal, thank, you right?

[00:01:15] So that's really cool, or if I change this to be cockatoo, or something like that, you can see all of the actions happening in real time. But here's where this starts getting a little bananas, I can actually start stepping backwards in time. So if I click this little arrow and watch my UI because it'll change, right?

[00:01:38] So I'm actually stepping backwards through and I can go backwards and forwards, this is called time traveling debugging. As you can probably imagine, this is incredibly useful for trying to figure out why things are happening, right? If I can step through, this action happened and then this action happened then this, okay, I understand where this where this broke.

[00:01:58] One of the first companies I worked at, whenever a person's app crash, we would dump their entire Redux store and all the actions that happened. And then we'd send it to our logging service and so that we the developers could then load it up and say, okay, this is where the user was wrong, right?

[00:02:13] That was incredibly useful. Okay, and you can actually even just press so if I press play, right? So, if I press play it'll actually just go through in order you can watch it go through the entire domain. Seems like what happens if I just skipped this one so you can click Skip It'll actually skip that action and then just run it all again now you might be thinking like how do they figure out like do and redo and all that kind of stuff it's not that complicated they actually just start from the beginning and they just apply all the.

[00:02:44] Actions in order, right? Because if you have discrete actions, you have to know all you have to know is how to go forward, you don't have to know how to go backwards. Okay, and I won't get into everything this is can do, but there's a lot of very cool things.

[00:03:01] I can actually see what the action looked like this was a change animal with Payload of bird. That's cool, I can see the current state at this time I can see a state chart. Right, so I have the state, but if you have like dependency ones, you can actually go down into like several layers of it, which if you have a big app, you definitely will.

[00:03:21] You can actually use combined reducer multiple times to generate multiple reducers. That's helpful, you can see the diff, this is what changed, right? This went from empty string to cockatoo that's useful, I haven't used trace that actually sounds really interesting, but I have not tried that yet. But perhaps one of the most useful things is this selection just generate tests for you.

[00:03:47] So you can say, all right, I have this reducer, given this state, given this change, I expect it to be this. If you like, if this is already correct, you're gonna say alright, generate a test for me. You just copy and paste that into your test suite, bam, you've written a test.

[00:04:05] The best kind of test is the one that I didn't have to write but it's actually still a good test, which this arguably is a very good test. Okay, and this, I'm looking at jest but there's mocha tape and Athan here as well. So that is very compelling as well, Okay, so this is one of the probably the most compelling reason to you is Redux, is like the dev tools are pretty awesome.

[00:04:37] Any questions about that or about we're done with Redux now so any more questions about Redux? I'll point out that the redux folder is now up to date here so you can hop on that. And there is a awesome course from Mr. Steve Kenny on that, that's way deeper into this.

[00:04:56] So definitely check that out if you're interested in more state management libraries for JavaScript and particularly for react.