顾名思义，开发工具应该只在开发过程中可见或可访问，而不是在生产过程中。我不想让我的最终用户与州和调度员玩游戏，也不想看到引擎盖下发生了什么。
有没有办法在生产构建中隐藏Redux 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隐藏。
这些家伙并没有真正给出所需的答案，但我在香草redux的redux文档中找到了答案，如果你在store.js中传递devTools: true，那么它在生产和开发中都可以工作，但你可以用这种方式禁用它：
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，此解决方案将起作用
对于使用redux工具包的人
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {
//your reducers
},
devTools: process.env.NODE_ENV !== 'production',
});
如果您使用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
));
开发工具中的记录器将在生产中禁用。您可以添加logOnlyInProduction来查看生产中的日志，而不是developmentOnly。
尽管我后来发现这个问题对新版本的Redux不再有效，但一些读者并不知道，因为没有人指出这一点，这里的每个人都在谈论在Redux Saga设置期间将__REDUX_DEVTOOLS_EXTENSION_COMPOSE__从组成增强器中排除。
我发现有几个不同的Redux Devtools
1.reduxjs/redux-devtools
这是来自Dan Abramov 的官方回购
reduxjs/redux-devtools是NPM包，您希望将其添加到增强器中，以便在项目中使用Redux Devtools。
对于生产中的手动集成和排除，请签出此页面。
2.zalmoxisus/redux-devtools扩展
从以前的答案和评论到我的旧样板代码，这是他们所有人都使用的代码。
您可以通过__REDUX_DEVTOOLS_EXTENSION_COMPOSE__将此开发工具添加到您的增强器中。
const store = createStore(
reducer, /* preloadedState, */
development() &&
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
并且在生产中应该将其移除。
3.无限的/反应的
Reactotron是一款macOS、Windows和Linux应用程序，用于检查基于Electron的React JS和React Native应用程序。这个很甜。它是一个跨平台的Electron应用程序，用于检查React和React Native应用程序，包括应用程序状态、API请求、性能、错误、sagas和操作调度。
您只需将其作为开发依赖项插入即可，因此它不会为生产构建添加任何内容。
对于那些使用Redux和Rematch的人来说，情况就不同了。
Redux与复赛
Rematch可以开箱即用地使用Redux Devtools。无需配置。
init() // initialized with devtools
对于手动集成，
init({
redux: {
devtoolOptions: {
disabled: production(),
},
},
})
您也可以使用redux-devtools-extension或reactotron进行复赛。有关详细信息，请签出此页面。
来自npm:的官方文档
只有几行代码。如果您不想允许生产中的扩展，只需使用"redux devtools extension/developmentOnly"而不是'redux devtools扩展'。
您可以在index.js文件中添加以下行
process.env.NODE_ENV === "development"
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: null || compose;
从redux devtools扩展中简单导入composeWithDevTools，最终用户将不会在生产中看到devtool扩展。。
import {composeWithDevTools} from "redux-devtools-extension/developmentOnly";
存在禁用生产日志的简单方法，
let middleware = process.env.NODE_ENV !== 'production' ? [sagaMiddleware, logger] : [sagaMiddleware];
完成了！