Using the Redux Devtools

Getting started with the Redux devtools.

We'll cover the following

Introduction

This section is going to be short and straight to the point.

From the start of the course, I’ve assumed you have the devtools installed on your local machine. If that’s not the case, be sure to download the Chrome extension.

Perform a search:

search for the redux devtools extension

And download the devtools extension from the extension page:

view the redux devtools extension

Configuring the devtools

By default, RTK has the Redux devtools enabled, but you can configure this via the devtools field in the configureStore parameter object:

export default configureStore({
 reducer: {
    finder: finderReducer,
    numberOfResults: numberOfResultsReducer,
  },
  // look here 👇
  devTools: false,
})

And sure enough, devtools will be disabled if you tried this on your local machine:

A disabled devtools integration

Here’s the signature for the devtools configuration value:

configureStore({
  // look here 👇
  devTools: boolean | DevToolsOptions,
})

You can pass a Boolean of true or false or configure the devtools even further via an options object. For most use cases, you’d be fine with leaving the devtools setup as is. However, if you want to make a change, now you know how! Be sure to also check out the devtools options that you can pass on here, i.e., DevToolsOptions.

Here’s a simple example to change the app name displayed on the devtools monitoring page.

Here’s the name shown now:

The name of the application displayed in devtools as React Redux App

React Redux App is a bit of a sad name, eh?

Let’s change that:

// app/store.js
export default configureStore({
  reducer: {
    finder: finderReducer,
    numberOfResults: numberOfResultsReducer,
  },
  // look here 👇
  devTools: {
    name: "TweetFind",
  },
});

And now, we should have this:

The name of the application displayed in devtools as Tweetfind

Great!

In most cases, changing the displayed application name isn’t something you’d concern yourself with. But for advanced use cases, it’s great to know that you can configure the devtools however you want. Yes, RTK sets it up by default. But in the end, you’ve still got the final say.

Get hands-on with 1200+ tech skills courses.