Another way to view action data in Redux DevTools is to look at the state diff that results from dispatching the action. Instead of trying to glean the changes in state by looking at the entire state tree, this view only shows you what changed.

Let's try adding a new book to generate some actions. I'm going to add the book you're reading right now. First, I'll paste in the title of the book that generates a change event on the input element, which in turn dispatches a SET_NEW_BOOK_TITLE action. If you select the action, you should see the following:

The title value of the newBook state went from an empty string to the value that was pasted into the title text input. Rather than having to hunt this change down, it is clearly marked for you to see, with all irrelevant state data hidden from view.

Next, let's paste in the author and select the SET_NEW_BOOK_AUTHOR action:

Once again, only the author value is shown here because it's the only value that changed as a result of dispatching SET_NEW_BOOK_AUTHOR. Here's the final form field—the image URL:

By using the Diff view of actions, you only see data that has changed as a result of the action. If this doesn't give you enough perspective, you can always jump to the State view so that you can see the state of the entire application.

Let's create the new book by clicking the Create button. This will dispatch two actions: CREATING_BOOK and CREATED_BOOK. First, let's look at CREATING_BOOK:

This action is dispatched before the API call to create the book is made. This gives your React component an opportunity to handle the asynchronous nature of the user interaction. In this case, you don't want the user to be able to interact with any form controls while the request is pending. As you can see by looking at this diff, the controlsDisabled value is now false, which the React component can use to disable any form controls.

Lastly, let's look at the CREATED_BOOK action:

The title, author, and imgURL values are set to empty strings, which resets the form field values. The form fields are also re-enabled by setting controlsDisabled to false.