Skip to main content

Redux DevTools: Your Best Friend for Debugging (Part 1) - How to Use This Powerful Tool #119

📖 Introduction​

Following our exploration of structuring a modern Redux app, this article introduces an essential tool for debugging Redux applications: the Redux DevTools. We will learn how to install and configure the Redux DevTools and how to use its basic features to inspect our application's state.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • A working Redux application.
  • How to install browser extensions.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ What the Redux DevTools Are: Understanding the purpose and benefits of the Redux DevTools.
  • ✅ Installation and Configuration: How to install the browser extension and configure your Redux store.
  • ✅ Basic Features: An overview of the basic features of the Redux DevTools, including the action inspector and state inspector.

🧠 Section 1: The Core Concepts of the Redux DevTools​

The Redux DevTools is a browser extension that provides a powerful set of tools for debugging Redux applications. It allows you to:

  • Inspect the state of your Redux store at any point in time.
  • See a log of all the actions that have been dispatched.
  • "Time travel" through your application's state changes.
  • Dispatch actions directly from the DevTools.

💻 Section 2: Deep Dive - Installation and Configuration​

Let's get started with installing and configuring the Redux DevTools.

2.1 - Installation​

First, you need to install the Redux DevTools browser extension. It's available for Chrome, Firefox, and other browsers. You can find it by searching for "Redux DevTools" in your browser's extension store.

2.2 - Configuration​

If you're using Redux Toolkit, the Redux DevTools are automatically configured for you. There's nothing else you need to do.

If you're using a plain Redux store, you'll need to install the redux-devtools-extension package and use the composeWithDevTools function to enhance your store.

npm install --save-dev redux-devtools-extension
// store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middleware)
  )
);

🛠️ Section 3: Using the Redux DevTools​

Once you have the extension installed and your store configured, you can open the Redux DevTools by opening your browser's developer tools and clicking on the "Redux" tab.

3.1 - The Action Inspector​

The action inspector on the left side of the DevTools shows a log of all the actions that have been dispatched in your application. You can click on an action to see the state of your application before and after the action was dispatched.

3.2 - The State Inspector​

The state inspector on the right side of the DevTools shows a tree view of your application's current state. You can use this to inspect the values of different properties in your state.

💡 Conclusion & Key Takeaways​

In this article, we've learned how to install and configure the Redux DevTools and how to use its basic features to inspect our application's state. The Redux DevTools are an essential tool for any Redux developer, and they can save you a lot of time and effort when debugging your applications.

Let's summarize the key takeaways:

  • The Redux DevTools is a powerful browser extension for debugging Redux applications.
  • It's automatically configured when you use Redux Toolkit.
  • The action inspector and state inspector are the two main features of the DevTools.

Challenge Yourself: To solidify your understanding, try to use the Redux DevTools to inspect the state of the to-do list application we built in the previous articles.

➡️ Next Steps​

You now have a basic understanding of the Redux DevTools. In the next article, "Redux DevTools: Your Best Friend for Debugging (Part 2)", we will explore some of the more advanced features of the DevTools, such as time travel debugging.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Redux DevTools: A browser extension that provides a set of tools for debugging Redux applications.
  • Time Travel Debugging: The ability to step backward and forward through the actions that have been dispatched in your application.

Further Reading​