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

Question

顾名思义，devtools 应该只在开发期间可见或可访问，而不是在生产期间。我不希望我的最终用户玩弄状态和调度程序或查看引擎盖下发生的事情。

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

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

原文由 Pushkin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然我后来发现这个问题对于新版本的 Redux 不再有效，但一些读者并没有意识到这一点，因为没有人指出这一点并且这里的每个人都在谈论从 Redux Saga 期间的 compose 增强器中排除 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 设置。

我发现有几个不同的 Redux Devtools

1.reduxjs/redux-devtools

这个来自 Dan Abramov 的官方回购

reduxjs/redux-devtools 是您要添加到增强器中以在项目中使用 Redux Devtools 的 NPM 包。

对于生产结帐中的手动集成和排除，请查看此 页面。

2. zalmoxisus/redux-devtools-扩展

从之前对我的旧样板代码的回答和评论来看，这是所有人都使用的。

你通过 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 添加这个 devtools 到你的增强器。

  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 请求、性能、错误、传奇和动作调度。

您只需将其作为您的开发依赖项插入，因此它不会向生产构建添加任何内容。

---

对于那些使用 Redux 和 Rematch 的人来说，情况就不同了。

Redux 与复赛

Rematch 开箱即用地与 Redux Devtools 配合使用。无需配置。

 init() // initialized with devtools

对于手动集成，

 init({
    redux: {
        devtoolOptions: {
            disabled: production(),
        },
    },
})

您还可以使用 redux-devtools-extension 或 reactotron 重新匹配。查看此 页面 以获取更多信息。

原文由 Pushkin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要从 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 和dev意味着它会被浏览器隐藏

原文由 AmerllicA 发布，翻译遵循 CC BY-SA 4.0 许可协议