生产环境如何禁用Redux DevTools隐藏state且保留开发模式可用

你不需要在开发环境移除调试工具，只需要在Redux store初始化逻辑里增加环境判断，就能实现开发环境正常用DevTools调试、生产环境完全屏蔽状态访问的效果，具体配置根据你用的Redux写法分两种：

原生Redux（createStore写法）配置 #

如果你没有用Redux Toolkit，是手动调用createStore初始化store，把原来直接对接DevTools的compose逻辑改成环境判断即可：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// 非生产环境才加载DevTools的compose增强器，生产环境直接用原生compose
const composeEnhancers = 
  process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  : compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

Redux Toolkit（官方推荐写法）配置 #

如果你用的是Redux Toolkit的configureStore，默认配置本身就会在生产环境自动关闭DevTools，如果你之前手动强制开启过，只需要显式指定devTools参数即可：

import { configureStore } from '@reduxjs/toolkit';
import complaintReducer from './features/complaint/complaintSlice';
import authReducer from './features/auth/authSlice';

export const store = configureStore({
  reducer: {
    complaint: complaintReducer,
    auth: authReducer
  },
  // 仅开发环境开启DevTools
  devTools: process.env.NODE_ENV !== 'production'
});

注意：Create React App/Vite/Next.js等常见前端脚手架在执行生产构建时，会自动把process.env.NODE_ENV替换为production，不需要手动注入环境变量。如果你是自定义webpack配置，记得在生产配置里加上DefinePlugin定义该环境变量即可。

配置完成后可以按以下方式验证效果：

• 本地执行生产构建命令，用静态服务启动构建产物，打开浏览器Redux DevTools面板，若提示未检测到Redux Store则配置生效，此时任何用户都无法通过插件读取应用状态
• 本地执行开发启动命令，DevTools可以正常加载，支持状态查看、时间旅行调试等所有功能，不影响开发效率

未做配置时的状态泄露问题示例：

相关参考：

• 项目源代码仓库
• 线上部署应用地址

内容的提问来源于stack exchange，提问作者Deepak Punia