如何在生产构建或断开连接中排除/禁用 Redux devtools？

Question

顾名思义，devtools 应该只在开发过程中可见或可访问，而不是在生产中。我不希望我的最终用户玩弄状态和调度程序或查看引擎盖下发生的事情。

有没有办法在生产版本中隐藏 Redux Devtools 或断开它？

我正在寻找 Vanilla Redux 的答案。不是 Redux Saga、Redux Thunk 或 Rematch。

Answer 1

对于使用 redux-toolkit 的人

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

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

Answer 2

要从 devtools 中隐藏 Redux，请注意以下代码：

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 3

如果您使用redux-devtools-extension，您可以通过以下方式轻松配置您的商店：

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

开发工具中的记录器将在生产中被禁用。developmentOnly您可以添加logOnlyInProduction以查看生产中的日志，而不是。

Answer 4

这些家伙并没有真正给出所需的答案，但我自己在 vanilla redux 的 redux 文档中发现了它，如果您devTools: true在 store.js 中传递了它，那么它将在生产和开发中都有效，但您可以在此禁用它道路 ：

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

上面的代码是 store.js

这对我有用，因为当您进行开发时，我也在使用 vanilla redux，只需制作devTools: true并运行您的应用程序即可

注意：正如@JamesPlayer 在评论中所说的（链接到评论），如果您正在使用此解决方案将起作用@reduxjs/toolkit