In the previous section, you saw how to use Redux DevTools to select specific actions to view their data. Actions and the data that they carry lead to changes in application state. When you select an action, you can view the effect that the action has on the overall application state.

Let's select the FETCHING_BOOK action and then select the State toggle button in the right-hand side pane:

This Tree view shows you the entire state of the application after the FETCHING_BOOK action is dispatched. The bookDetails state is expanded here so that you can see the effect the action has on the state. In this case it's the loading value—which is now true.

Let's select the Chart view of this action now:

I happen to like the Chart view better than the Tree view for visualizing the entire state of the application. At the far left of the chart you have the root state. To the right of this, you have the main slices of application state—app, home, newBook, and bookDetails. As you move further and further right, you're drilling down into the specific state of components in your app. As you can see here, the deepest level is the individual books within the books array, which is part of the home state.

The FETCHING_BOOK action is still selected, which means that this chart is a reflection of the application state after reducers have responded to this action. This action changes the loading state within bookDetails. If you move your mouse pointer over the state label, you'll see its value:

Now let's select the FETCHED_BOOK action. This action is dispatched when the book detail data is resolved from the API call that is made to get it:

If you keep the Chart view activated while switching to a different action, you'll notice that the chart actually animates the changes in state. It looks cool, no doubt, but it also calls your attention to the values that actually changes so that they're easier to see. In this example, if you look at the book object under bookDetails, you'll see that it now has new properties. You can move your mouse pointer over each of them to reveal their value. You can also check the loading value—it should be back to false.