Using the Redux Devtools

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:

And download the devtools extension from the extension page:

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:

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:

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:

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.