如何在生产构建或断开连接中排除/禁用 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以查看生产中的日志。