Как исключить / отключить Redux devtools в производственной сборке или отключить?

Question

Как следует из названия, devtools должны быть видимы или доступны только во время разработки, а не в процессе производства. Я не хочу, чтобы мои конечные пользователи играли с государством и диспетчером или видели, что происходит под капотом.

Есть ли способ скрыть Redux Devtools или отключить его в производственной сборке?

Я ищу ответы на Vanilla Redux. Не Redux Saga, Redux Thunk или Rematch.

Answer 1

Для сокрытия Redux от devtools обратите внимание на следующий код:

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

Это интеграция между Redux и Redux-Saga, которая не важна:

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

Для настройки composeEnhancers просто используйте __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ в клиенте и точно в режиме разработки, в противном случае код просто использует compose, и это означает, что он будет скрыт от браузеров devtools.

Answer 2

Хотя позже я узнал, что этот вопрос более актуален для новых версий Redux, некоторые читатели не знали об этом, так как никто не указал на это, и все здесь говорили об исключении __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ из расширений compose во время установки Redux Saga. .

Я обнаружил, что есть несколько разных Redux Devtools

1. reduxjs / redux-devtools

Это из официального репо Дан Абрамов

reduxjs/redux-devtools - это NPM пакет, который вы хотите добавить в ваши энхансеры для использования Redux Devtools в вашем проекте.

Для ручной интеграции и исключения в производственном контроле эта страница .

2. zalmoxisus / redux-devtools-extension

Из предыдущих ответов и комментариев к моему старому шаблонному коду, это был тот, который использовался всеми ими.

Вы добавляете это devtools на __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ к вашим энхансерам.

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

и в производстве его следует удалить.

3. infinitered / реагиотрон

Reactotron - это приложение macOS, Windows и Linux для проверки приложений React JS и React Native, созданных на Electron. Этот сладкий Это кроссплатформенное приложение Electron для проверки приложений React и React Native, включая состояние приложения, запросы API, perf, ошибки, саги и диспетчеризацию действий.

Вы просто подключаете его как свою dev-зависимость, поэтому это ничего не добавит к производственной сборке.

---

Для тех, кто использует Redux с Rematch , это другая история.

Redux With Rematch

Rematch работает с Redux Devtools из коробки. Конфигурация не требуется.

init() // initialized with devtools

Для ручной интеграции:

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

Вы также можете сделать повторное сравнение redux-devtools-extension или reactotron. Закажите эту страницу для получения дополнительной информации.