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

Question

顾名思义，devtools 应该只在开发过程中可见或可访问，而不是在生产过程中。我不希望我的最终用户玩弄 state 和 dispatcher 或者看到幕后发生的事情。

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

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

Answer 1

要从 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 2

这些人并没有真正给出所需的答案，但我在 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

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以查看生产中的日志。