CODEWITHSUNDEEP
javascriptsecurityredux
Pushkin
Pushkin

Reputation: 3604

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

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.

Upvotes: 35

Views: 53307

Answers (10)

Gerardo Verrone
Gerardo Verrone

Reputation: 431

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;

Upvotes: 0

Arman
Arman

Reputation: 811

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";

Upvotes: 1

Peppers
Peppers

Reputation: 386

For someone using redux-toolkit

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

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

Upvotes: 30

John Doe
John Doe

Reputation: 1172

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.

Upvotes: 11

tonnoz
tonnoz

Reputation: 502

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

Upvotes: 2

Gayatri Dipali
Gayatri Dipali

Reputation: 1283

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

Upvotes: 33

Muteshi
Muteshi

Reputation: 1318

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

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

Upvotes: 2

TahaArab
TahaArab

Reputation: 151

easy way to disable production logs is exist,

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

and done!

Upvotes: 0

Pushkin
Pushkin

Reputation: 3604

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.

Upvotes: 4

AmerllicA
AmerllicA

Reputation: 32532

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.

Upvotes: 31

Related Questions