Redux DevTools

[00:00:00]
>> Steve: Let's actually go ahead over here and take a look. Because I just started it up.
>> Steve: Sure.
>> Steve: Module not found, reducers. Let's see what we got here. Where would I call the file?
>> Steve: I made that folder, I need to pull it into the source directory.

[00:00:34]
>> Steve: That's gonna be true of the folders that I tried to set up for us. So I'll pull containers in as well.
>> Steve: And actions, just pulled up the wrong directory.
>> Steve: So we gotta raise the QI now. Now, we haven't really done anything here, but we can see everything's kind of like put together.

[00:00:56]
What I wanna show you real quick is, there are Redux DevTools which are pretty wonderful. If you have a Chrome extension installed or a Firefox, and once you have that place, you do need to tell the Redux DevTools that they exist. So what we'll do is we will go into our index.js.

[00:01:20]
>> Steve: And [BLANK-AUDIO] we can pass it as we create the story, we can basically hook it up into those DevTools. Now, it's got a intentionally terrible name.
>> Steve: REDUX_DEVTOOLS_EXENSION.
>> Steve: So we'll check to see if it's on a window. You could also do if environment is development and do this as well if you wanna make sure that no one can see it.

[00:01:56]
>> Steve: So we'll see if this is available on the window object. And if so, we'll go ahead, and we'll call it.
>> Steve: And what this does is allows us to go in,
>> Steve: These Redux tools. And you can see, effectively every action that comes through, we were cancel logging this in the very beginning.

[00:02:18]
We can see every action that comes through, the current state of our application, so you can see those lists there. Differences between after an action has happened. And you can see that there's a rewind button, where you can like, kind of as things happen in your application, go through and see.

[00:02:33]
So as if really great about seeing the kind of state of our state, if you will.