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

Posted 2023-02-19

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

【英文标题】：How to exclude / disable Redux devtools in production build or disconnect?

【发布时间】：2020-07-09 13:45:58

【问题描述】：

正如它的名字所暗示的那样，devtools 应该只在开发过程中可见或可访问，而不是在生产过程中。我不希望我的最终用户玩弄 state 和 dispatcher 或者看到幕后发生的事情。

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

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

【问题讨论】：

您确定没有在您的createStore 调用中添加__REDUX_DEVTOOLS_EXTENSION__ 增强器吗？如果你是，你可以添加那个条件。

IMO nothing 在客户端代码中是真正私有的。那些试图深入了解正在发生的事情的人也可能会对正在发生的事情进行逆向工程，因此大力禁用这些工具似乎毫无意义。

对不起，我们使用的是旧的 redux 版本。此问题不再适用于较新版本。

出于兴趣，对现代 JS 来说还很陌生：是否存在由于安装了 devtools 而在非生产环境中工作的危险——可能包括你的手动测试和自动化测试环境——然后结果导致生产中断？

【参考方案1】：

要从开发工具中隐藏 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 隐藏。

【讨论】：

我知道这不是你@VijayPushkin，我隐藏redux 扩展的答案是正确的方法，但隐藏ReactJS DevTools 是不可能的。我尝试了很多方法，但没有一个无法从扩展中隐藏 ReactJS 项目。

nodeEnv 是做什么的？

突然得到一些相关的东西：Uncaught ReferenceError: compose is not defined 帮助？在 Object. (index.js:10) 在 webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) 在 fn (bootstrap cb43f8aa1e38f1ee9aeb:117) 在 Object. (index.js:8) 在webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) at fn (bootstrap cb43f8aa1e38f1ee9aeb:117) at Object. (app.bundle.js:100671) at webpack_require (bootstrap cb43f8aa1e38f1ee9aeb: 712) 在 webpackJsonpCallback (bootstrap cb43f8aa1e38f1ee9aeb:25) 在 app.bundle.js:1

【参考方案2】：

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

我发现有几个不同的 Redux Devtools

1。 reduxjs/redux-devtools

这个来自Dan Abramov的官方repo

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

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

2。 zalmoxisus/redux-devtools-extension

从以前的答案和 cmets 到我的旧样板代码，这是所有人都使用的。

您将 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 的这个 devtools 添加到您的增强器中。

 const store = createStore(
   reducer, /* preloadedState, */
   development() && 
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

在生产中它应该被删除。

3。 infinitered/reactotron

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 进行复赛。查看此page 了解更多信息。

【讨论】：

最好的方法不是在生产环境中“删除该代码”。您不必记住在部署之前删除代码。最好的解决方案是检测您是否处于生产环境中，并且在这种情况下不启用开发工具。

这是不言而喻的，不是吗？ @Cully

您举例说明了如何包含开发工具，然后说：“在生产环境中，您删除了该代码。”

用环境条件更新了我的答案

【参考方案3】：

这些人并没有真正给出所需的答案，但我在 vanilla 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 在评论 (link to comment) 中所说，如果您使用的是@reduxjs/toolkit，此解决方案将有效

【讨论】：

应该提到的是，这只有在您使用redux toolkit时才有效

devTools: process.env.NODE_ENV === 'development', 仅用于开发

【参考方案4】：

存在禁用生产日志的简单方法，

let middleware = process.env.NODE_ENV !== 'production' ? [sagaMiddleware, logger] : [sagaMiddleware];

完成了！

【参考方案5】：

您可以将以下行添加到您的 index.js 文件中

  process.env.NODE_ENV === "development"
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    : null || compose;

【参考方案6】：

来自official documentation on npm：

只有few lines of code。如果您不想让 生产中的扩展，只需使用 'redux-devtools-extension/developmentOnly' 而不是 'redux-devtools-extension'。

【参考方案7】：

如果您使用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 来查看生产中的日志。

【讨论】：

官方出处：github页面最后一行of this point

你根本没有回答问题

【参考方案8】：

对于使用 redux-toolkit 的人

import  configureStore  from '@reduxjs/toolkit';

const store = configureStore(
  reducer: 
    //your reducers
  ,
  devTools: process.env.NODE_ENV !== 'production',
);

【参考方案9】：

简单地从 redux-devtools-extension 导入 composeWithDevTools，最终用户不会在生产中看到 devtool 扩展。..

import composeWithDevTools from "redux-devtools-extension/developmentOnly";