Configure and Use Redux Dev Tools

[00:00] I've installed the Redux DevTools Chrome extension. If I open the DevTools in my browser, I'll see that I get an option for Redux. When I open the Redux DevTools, we're not going to see any output. It will tell us that no store was found.

[00:14] Even though I've connected this application through Redux, the DevTools can't automatically detect it, so we're going to have to do some setup to make sure that DevTools can connect to our Redux store. In order to do that, I'm going to switch over to the terminal and install an npm module.

[00:31] In my terminal, I'm going to use yarn to install an extension, so I'm going to say yarn add redux-devtools-extension, and now that that's installed, let's modify our code. I'm going to switch into my editor, and I'm going to open up store.js where I'm configuring the redux store.

[00:51] I'm going to add an import, and I want to import composeWithDevTools, and that's going to come from the redux-devtools-extension module. With that imported, I'm going to jump into the createStore method call, and I want to call composeWithDevTools, and I'm actually going to move my applyMiddleware call into composeWithDevTools.

[01:18] We can break this onto another line to make it a little more readable. Now, I can save the store, and when the browser reloads, well see that we get the UI for our DevTools. I'm going to increase the size of my browser, and let's take a look at the DevTools.

[01:38] Here we can see a list of actions, we can see this @@init which is the initial action that's passed through our reducer, then we can see todosLoaded which we're calling from one of our asynchronous actions. Then in here we can actually see our state.

[01:52] If we look at just the state we'll see that we have todos which is an array of objects, and our current todo. Of course, we have more room we can expand this out, and we can look at each of the todos, each with their id, name, and isComplete flag.

[02:09] I can also come into diff and it will show me for each action what has changed, so in this case everything that is green is new. When this loadTodos action is called, all these todos are loaded in and they're new objects that have been added to the store.

[02:24] If I come up here and I start typing characters, we'll see new actions start to appear and we can see that our current todo goes from an empty string to the first letter, and then from the first letter to the first two letters.

[02:42] If we keep going, we can just see each one of these state changes appear, and we can walk through and see what each action has done to modify our state. Down here we have a little stopwatch icon, if I click on this, this gives me the ability to move back and forth through my state changes.

[02:59] If you watch the input as I scroll left, we'll see that that changes and I can step through my state forward and backward, and I can play it back from whatever point I was at. I can pause it, I can change the speed, have it played back at double speed, and we can actually watch the changes in our application happen over time through the DevTools.

[03:32] Aside from the ability to move forward and backward through time, we can also dispatch actions directly from the DevTools. If I wanted to test the current update functionality, I could do that and I just have to give it a type, and then I have to know the shape of my action object which requires a payload.

[03:56] I can give this a payload of testDevTools, and when we dispatch this, we expect the input to change. We'll see that that works, and that action has been added to our timeline. The Redux DevTools give us some really powerful testing and debugging tools once properly configured and installed.