Installing Redux DevTools

Installing the Redux DevTools browser extension follows a process similar to the one used to install the React Developer Tools extension. The first step is to open the Chrome Web Store and search for redux:

The extension that you're looking for will likely be the first result:

Go ahead and click on the Add To Chrome button. You'll then see a dialog that asks for your permission to install the extension after showing you what it can change:

After you click on the Add extension button, you'll see a notification that the extension has been installed:

Just like the React Developer Tools extension, the Redux DevTools icon will remain disabled until you open a page that is running Redux and has added support for the tool. Recall that you explicitly added support for this tool in the book manager app with the following code:

export default createStore(
  reducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
);

Now let's fire up the book manager app and make sure that you can use the extension with it. After running npm start and waiting for the UI to open and load in a browser tab, the React and Redux developer tool icons should both be enabled:

Next, open up the developer tools browser pane. You can access the Redux DevTools the same way that you would access the React Developer Tools:

When you select the Redux tool, you should see something similar to this:

The left pane in the Redux DevTools has the most important data—the actions in your application. As reflected here, three actions have been dispatched by your book manager app, so you know that everything's working!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.218.38.125