javascript - 如何在生产构建或断开连接中排除/禁用 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 中隐藏。