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.

Answer 1

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.