Chapter 9. Instrumenting Application State with Redux

Redux is the de facto library for managing state in your React applications. On their own, React applications can manage the state of their components using nothing but setState(). The challenge with this approach is that there's nothing controlling the ordering of state changes (think about asynchronous calls like HTTP requests).

The aim of this chapter isn't to introduce you to Redux—there are plenty of resources for this, including Packt books and the official Redux documentation. So, if you're new to Redux, you might want to spend 30 minutes familiarizing yourself with the basics of Redux before continuing here. The focus of this chapter is the tooling that you can enable within your web browser. I think that a significant portion of the value of Redux comes from the Redux DevTools browser extension.

In this chapter, you'll learn:

• How to build a basic Redux app (without going into depth on Redux concepts)
• Installing the Redux DevTools...

Building a Redux app

The example application that you'll use in this chapter is a basic book manager. The goal is to have something that has enough functionality to demonstrate different Redux actions, but simple enough that you can learn Redux DevTools without feeling overwhelmed.

The high-level functionality of this application is as follows:

• Renders a list of books that you want to keep track of. Each book displays the title, author, and cover image of the book.
• Allows the user to filter the list by typing in a text input.
• The user can create a new book.
• The user can select a book to view more details.
• Books can be deleted.

Let's spend a few minutes walking through the implementation of this app before you dive into the Redux DevTools extension.

The App component and state

The App component is the outer shell of the book manager application. You can think of App as the container for every other component that gets rendered. It is responsible for rendering the left-hand side navigation, and for...

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...

Selecting and examining actions

The actions displayed on the left-hand side pane of Redux DevTools are listed chronologically, based on when they were dispatched. Any action can be selected, and by doing so, you can use the right-hand side pane to examine different aspects of the application state and of the action itself. In this section, you'll learn how to look deeper into how Redux actions drive your application.

Action data

By selecting an action, you can view the data that's dispatched as part of the action. But first, let's generate some actions. Once the app loads, the FETCHING_BOOKS and FETCHED_BOOKS actions are dispatched. Click on the React Native Blueprints link, which loads the book data and takes you to the book details page. This results in two new actions being dispatched: FETCHING_BOOK and FETCHED_BOOK. The rendered React content should look like this:

The list of actions in Redux DevTools should look like this:

The @@INIT action is dispatched automatically by Redux and is always...

Time travel debugging

One requirement of reducer functions in Redux is that they're pure; that is, they only return new data as opposed to mutating existing data. One consequence of this is that it enables time travel debugging. Because nothing ever changes, you can move the state of your application forward, backward, or to an arbitrary point in time. The Redux DevTools make this easy to do.

To see time travel debugging in action, let's type some filter text into the filter input box:

Looking at the actions in Redux DevTools, you should see something along these lines:

I've selected the last SET_FILTER_VALUE action that was dispatched. The filterValue value should be native b, which reflects the titles that are currently displayed. Now, let's travel back to two actions ago. To do this, move your mouse pointer over the action that's two positions behind the currently selected action. Click on the Jump button, and the state of the application will be changed to the state when this SET_FILTER_VALUE...

Manually triggering actions

The ability to manually trigger actions during development of a Redux application can be helpful. For instance, you might have components ready, but you're unsure of how the user interaction will work or you just need to troubleshoot something that should be working but isn't. You can use Redux DevTools to manually trigger actions by clicking on the button with the keyboard icon, near the bottom of the pane:

This will display a text input where you can enter the action payload. For example, I've navigated to the book detail page for React Native By Example:

Instead of clicking on the Delete button, I only want to see what happens regarding the state of the application, without triggering DOM events or API calls. To do this, I can click on the keyboard button in Redux DevTools, which allows me to manually enter an action and dispatch it. For example, here is how I would dispatch the DELETING_BOOK action:

This results in the action being dispatched and consequently...

Exporting and importing state

As your Redux applications grow in size and complexity, the size and complexity of your state trees will grow in tandem. Because of this, there will be times when playing around with individual actions and to get your app into a specific state could be too cumbersome to perform manually over and over again.

Using Redux DevTools, you can export the current state of the application. Then, when you're troubleshooting later on and you need a specific state as a starting point, you can load it directly, rather than manually recreate it.

Let's try exporting the application state. First, navigate to the details page for React 16 Essentials:

To export the current state using Redux DevTools, click on the button with the down arrow:

Then, you can use the up arrow to import the state. But before you do that, navigate to a different book title, such as Getting Started with React VR:

Now, you can use the upload button in the Redux DevTools pane:

Since you're already on the book...

Summary

In this chapter, you put together a simple book manager Redux app. With the app in place, you then learned how to install the Redux DevTools browser extension in Chrome. From there, you learned how to view and select actions.

There are a number of ways to view information about the application once you've selected an action. You can look at the action payload data. You can look at the application state in its entirety. You can look at diffs between the app state and the last dispatched action. These are all different approaches you can use to instrument your Redux applications.

Then, you learned how time travel debugging works in Redux DevTools. Because state changes are immutable in Redux, you can use Redux DevTools to jump around from action to action. This can drastically simplify debugging cycles. Lastly, you learned how to manually dispatch actions and import/export the state of your application.

In the next chapter, you'll learn how to use Gatsby to generate static content from...