How to exclude / disable Redux devtools in production build or disconnect?

Question

As its name suggests devtools should be visible or accessible only during development and not in production. I don't want my end users playing with the state and dispatcher or seeing what's going on under the hood.

Is there a way to hide Redux Devtools or disconnect it in the production build?

I'm looking answers for Vanilla Redux. Not Redux Saga, Redux Thunk or Rematch.

Smut

Are you sure you're not adding the __REDUX_DEVTOOLS_EXTENSION__ enhancer in your createStore call? If you are, you can make adding that conditional. – Roustabout

IMO nothing is truly private in client-side code anyway. The types of people that would try to dive into what's going on would be the same sorts that could reverse engineer what's going on as well, so it seems pointless to make big efforts to disable those tools. – Roustabout

Sorry guys, we were using old redux version. This question no longer applies to newer version. – Smut

Out of interest, being quite new to modern JS: is there a danger that something in your non production environments works by virtue of having devtools installed - perhaps including your manual test and automated test environments - and then something breaks in production as a result? – Total

Answer 1

For someone using redux-toolkit

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    //your reducers
  },
  devTools: process.env.NODE_ENV !== 'production',
});

Apostate

Answer 2

These guys didn't really give the required answer but i found it out my self on the redux documentation for vanilla redux, if you pass the devTools: true in your store.js then it will work in both production and development but you can disable it in this way :

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';
import chatReducer from '../features/chatSlice';

export default configureStore({
  reducer: {
    user: userReducer,
    chat: chatReducer,
  },
  devTools: false,
});

The above code is of the store.js

This worked for me as i was also working with vanilla redux when you are doing developments just make the devTools: true and run your app it will work

NOTE : As said by @JamesPlayer in comment (link to comment), this solution will work if you are using @reduxjs/toolkit

Mating

It should be mentioned that this only works if you're using the redux toolkit – Howdy

devTools: process.env.NODE_ENV === 'development', for development only – Barquentine

Answer 3

For hiding the Redux from devtools pay attention to the following code:

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import reducer from '~/redux/reducers';
import mySaga from '~/redux/sagas';
import { nodeEnv } from '~/utils/config';

const composeEnhancers =
  (nodeEnv !== 'production' &&
    typeof window !== 'undefined' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;

const sagaMiddleware = createSagaMiddleware();

export default createStore(
  reducer,
  composeEnhancers(applyMiddleware(sagaMiddleware))
);

sagaMiddleware.run(mySaga);

It is an integration between Redux and Redux-Saga that is not important the point is the:

const composeEnhancers =
  (nodeEnv !== 'production' &&
    typeof window !== 'undefined' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;

The composeEnhancers is tuned just use __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ in the client and exactly development mode, otherwise the code just use compose and it means it will be hidden from browsers devtools.

Magill

I know it is not you @VijayPushkin, my answer for hiding from the redux extension is the right proper way, but for hiding from ReactJS DevTools is not possible. I try many ways but none of them couldn't hide a ReactJS project from extensions. – Magill

what does nodeEnv do? – Heida

suddenly getting something related: Uncaught ReferenceError: compose is not defined Help? at Object.<anonymous> (index.js:10) at webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) at fn (bootstrap cb43f8aa1e38f1ee9aeb:117) at Object.<anonymous> (index.js:8) at webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) at fn (bootstrap cb43f8aa1e38f1ee9aeb:117) at Object.<anonymous> (app.bundle.js:100671) at webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) at webpackJsonpCallback (bootstrap cb43f8aa1e38f1ee9aeb:25) at app.bundle.js:1 – Coffle

Answer 4

if you use redux-devtools-extension, you can configure your store easily this way :

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

const composeEnhancers = composeWithDevTools({
  // options like actionSanitizer, stateSanitizer
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

The logger in the dev tools will be disabled in production. Instead of developmentOnly, you can add logOnlyInProduction to see the logs in production.

Natator

official source: the last line of this point in the github page – Uniocular

You didn't answer the question at all – Unofficial

Answer 5

Though I later found out that this question is longer valid for new versions of Redux, some readers were unaware of it, since nobody has pointed this out and everyone here was talking about excluding __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ from compose enhancers during Redux Saga setup.

What I found out was there are few different Redux Devtools

1. reduxjs/redux-devtools

This one is from the official repo by Dan Abramov

reduxjs/redux-devtools is the NPM package which you want to add in your enhancers to use Redux Devtools in your project.

For Manual integration and exclusion in production checkout this page.

2. zalmoxisus/redux-devtools-extension

From the previous answers and comments to my old boilerplate code, this was the one used by all of them.

You add this devtools by __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ to your enhancers.

 const store = createStore(
   reducer, /* preloadedState, */
   development() && 
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

and in production it should be removed.

3. infinitered/reactotron

Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and React Native apps built on Electron. This one is sweet. It is a cross-platform Electron app for inspecting React and React Native apps, including app state, API requests, perf, errors, sagas, and action dispatching.

You just plug it as your dev-dependency, so it will add nothing to the production build.

---

For the ones using Redux with Rematch, it's a different story.

Redux With Rematch

Rematch works with Redux Devtools out of the box. No configuration required.

init() // initialized with devtools

For manual integration,

init({
    redux: {
        devtoolOptions: {
            disabled: production(),
        },
    },
})

You can also make rematch use redux-devtools-extension or reactotron. Checkout this page for more info.

Smut

The best way to do this is not to "remove that code" in production. You don't want to have to remember to remove code before deploying. The best solution is to detect whether you are in a production environment and to not enable dev tools in that case. – Tsarism

That goes without saying, doesn't it? @Tsarism – Smut

You gave an example of how to include dev tools and then said, "and in production you remove that code." – Tsarism

Updated my answer with env conditionals – Smut

Answer 6

You can add the following line to your index.js file

  process.env.NODE_ENV === "development"
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : null || compose;

Worthington

Answer 7

as from the official documentation on npm :

There’re just few lines of code. If you don’t want to allow the extension in production, just use ‘redux-devtools-extension/developmentOnly’ instead of ‘redux-devtools-extension’.

Bourgeon

Answer 8

simple import the composeWithDevTools from redux-devtools-extension and end users won't see the devtool extension in production..

import {composeWithDevTools} from "redux-devtools-extension/developmentOnly";

Fibroin

Answer 9

easy way to disable production logs is exist,

let middleware = process.env.NODE_ENV !== 'production' ? [sagaMiddleware, logger] : [sagaMiddleware];

and done!

Idun

Answer 10

I'm not using the new toolkit version (that's why you see the legacy_createStore) and found a work arround to make it works as follows:

import { applyMiddleware, legacy_createStore } from "redux";
import rootReducers from "./reducers/rootReducers";
import { composeWithDevTools } from "@redux-devtools/extension";
import { thunk } from "redux-thunk";

const composeEnhancers = (middlewares) => {
  //console.log(process.env.NODE_ENV)
  return process.env.NODE_ENV !== "production"
    ? composeWithDevTools(middlewares)
    : middlewares;
};

const store = legacy_createStore(
  rootReducers,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

Halakah