Learn to make use of a Google Chrome extension that will allow you to have a more robust Redux development experience.
Now we're going to make use of redux devtools, a Google Chrome extension 0:00 that will allow us to have a more robust redux development experience. 0:04 Now there's also redux dev tool extensions for Firefox and Electron, as well as 0:09 an alternative for other browsers, but they won't be covered in this course. 0:13 For more information on those, be sure to check the teacher's notes. 0:17 So let's start by installing the Chrome extension for it redux dev tools. 0:20 Let's open up Chrome and head to the Chrome web store and 0:24 do a search for redux devtools. 0:27 You'll see the extensions listed here under extensions and 0:31 you can click add to Chrome to install the extension. 0:34 Now I already have it installed, so 0:37 now I'll go back to the scoreboard application and open up the index.js file. 0:39 In order to use Redux DevTools with your app, 0:43 you'll need to add one additional piece of data to the createStore method. 0:46 Specifically, we're going to add the DevTools to the Redux middleware pipeline 0:50 and you can learn more about middleware in the teacher's notes of this video. 0:54 So in the createStore method below player reducer, add window.devtoolsextension and 0:58 window.devtoolsextension, followed by a set of parentheses. 1:06 And that's it. 1:12 We've successfully wired up our application to take 1:14 advantage of the redux dev tools extension we just added to Chrome. 1:17 Now let's start up our app and check out what capabilities our application has now. 1:22 Once you have the application running, open up the Chrome developer tools and 1:26 you'll notice that there's a tab now called redux. 1:30 Click on this tab and you should see the following interface. 1:34 Notice that there's nothing in the left pane, so let's change that. 1:37 We'll do that by taking actions in our scoreboard application. 1:41 So let's add a player, change some scores and remove a player. 1:45 And now your Redux dev panel should look similar to this, 1:52 displaying all the actions you took. 1:54 If you highlight over one of them and 1:57 click Skip, notice that it immediately revokes the action that was taken and 1:59 then the UI is instantly updated to reflect the new state. 2:04 So you should now be seeing the benefits of redux. 2:07 But before we wrap up the course, 2:10 let's take a look at a few more features of the redux devtools. 2:11 First you may notice the slider option at the bottom of the Redux devtools panel. 2:15 If you click the button, you'll see the slider appear. 2:20 Redux devtools keeps track of all dispatched actions and 2:23 the changes in state. 2:27 It can even reverse those changes. 2:29 So if you have this selected, you'll be able to step forward and 2:31 back through time in your application based on the actions that were taken. 2:35 Now this may not seem all that exciting, but imagine that you have an application 2:39 where you've captured all the actions that a user has taken in your app and 2:42 now have the ability to walk through them. 2:47 The ability to debug an issue has just become much easier 2:49 because you've recorded all the actions leading up to a bug. 2:52 Not to mention that when coupled with react, you can be sure that the visual 2:56 state will also reflect what your user was seeing as the state changed. 2:59 Now, that's pretty powerful. 3:04 Now, if you're still not quite convinced, 3:05 let's open up the dispatcher at the bottom of the panel, 3:07 by clicking the dispatcher button and this will provide us with the ability to 3:10 take actions in our app, without even having to enter act with the UI at all. 3:14 Let's add an action in the dispatcher. 3:19 We'll say type player/ADD_PLAYER. 3:22 And we'll add a name of Tommy Pickles. 3:26 When you click on the Dispatch button, you'll see that the scoreboard application 3:34 now reflects the action we just dispatched from the DEV tools. 3:39 Now we've only just scratched the surface of the capabilities of the Redux devtools, 3:43 but you now have a powerful tool at your disposal for 3:47 working with your redux applications. 3:50
You need to sign up for Treehouse in order to download course files.Sign up