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

Question

顾名思义，开发工具应该只在开发过程中可见或可访问，而不是在生产环境中。我不希望我的最终用户玩弄状态和调度器，或者看到底层的情况。

有没有办法在生产构建中隐藏Redux Devtools或断开与之的连接?

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

- Pushkin

---

你确定在 createStore 调用中没有添加 __REDUX_DEVTOOLS_EXTENSION__ 增强器吗？如果有的话，你可以将其添加条件化。 - Jacob

在客户端代码中，我认为“没有什么”是真正私密的。那些试图深入了解情况的人往往也是能够反向工程的人，因此似乎没有必要大费周折地禁用这些工具。 - Jacob

抱歉，大家，我们使用的是旧版的redux。这个问题不再适用于更新的版本。 - Pushkin

作为一个相对较新的现代JS开发者，我有一个问题：在非生产环境中安装了开发工具，包括手动测试和自动化测试环境，是否存在某种危险性，导致在生产环境中出现故障？ - halfer

Answer 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，这意味着它将从浏览器的开发工具中隐藏。

- AmerllicA

---

我知道这不是你@VijayPushkin，我的答案是隐藏redux扩展的正确方法，但是无法隐藏ReactJS DevTools。我尝试了很多方法，但是没有一种方法可以隐藏ReactJS项目免受扩展的影响。 - AmerllicA

nodeEnv 是做什么用的？ - Chris Paul

突然出现了一个相关的问题：Uncaught ReferenceError: compose is not defined。有什么帮助吗？ at Object.<anonymous> (index.js:10) at webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) at fn (bootstrap cb43f8aa1e38f1ee9aeb:117) at Object.<anonymous> (index.js:8) at webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) at fn (bootstrap cb43f8aa1e38f1ee9aeb:117) at Object.<anonymous> (app.bundle.js:100671) at webpack_require (bootstrap cb43f8aa1e38f1ee9aeb:712) at webpackJsonpCallback (bootstrap cb43f8aa1e38f1ee9aeb:25) at app.bundle.js:1 - smartblonde

Answer 2

这些人并没有给出所需的答案，但我在原版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在评论中所说（链接到评论），如果你正在使用@reduxjs/toolkit，这种解决方案将起作用。

- Gayatri Dipali

---

需要提醒的是，这仅适用于使用redux toolkit的情况。 - JamesPlayer

仅用于开发环境：devTools: process.env.NODE_ENV === 'development' - Marcel Mateman

Answer 3

对于使用redux-toolkit的人

import { configureStore } from '@reduxjs/toolkit';

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

- Peppers

Answer 4

如果你使用 redux-devtools-extension，你可以通过以下方式轻松配置你的 store：

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
));

在生产环境中，开发工具中的记录器将被禁用。您可以添加 logOnlyInProduction 以在生产环境中查看日志，而不是使用 developmentOnly。

- John Doe

---

官方来源：在 GitHub 页面的这个点的最后一行。 - benmneb

你根本没有回答这个问题。 - vsync

Answer 5

尽管后来发现这个问题已经不再适用于新版本的Redux，但一些读者不知道这一点，因为没有人指出，而所有人都在谈论在Redux Saga设置期间从组合增强器中排除__REDUX_DEVTOOLS_EXTENSION_COMPOSE__。

我发现有几种不同的Redux Devtools

1. reduxjs/redux-devtools

这个来自Dan Abramov的官方仓库。

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

有关手动集成和在生产中排除，请查看此页面。

2. zalmoxisus/redux-devtools-extension

从之前的答案和评论到我的旧样板代码中，这是所有人都使用过的工具。

你可以通过在增强器中添加__REDUX_DEVTOOLS_EXTENSION_COMPOSE__来添加这些devtools。

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

在生产环境中，应将其移除。

3. infinitered/reactotron

Reactotron是一个基于Electron构建的macOS、Windows和Linux应用程序，用于检查React JS和React Native应用程序。这个工具很棒。它是一个跨平台的Electron应用程序，可用于检查React和React Native应用程序，包括应用程序状态、API请求、性能、错误、sagas和操作分发。

只需将其作为开发依赖项插入即可，因此不会添加任何内容到生产版本中。

---

对于那些使用Redux和Rematch的人来说，情况则有所不同。

与Rematch一起使用的Redux

Rematch可以直接与Redux Devtools一起使用，无需进行配置。

init() // initialized with devtools

对于手动集成：

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

你也可以让rematch使用redux-devtools-extension或reactotron。查看此页面获取更多信息。

- Pushkin

---

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

那是不言而喻的，不是吗？@Cully - Pushkin

你举了一个如何包含开发工具的例子，然后说：“在生产环境中，你会删除那段代码。” - Cully

更新了我的答案，加入了环境条件语句。 - Pushkin

Answer 6

从npm官方文档中可以看到：

这只是几行代码。如果您不想在生产环境中允许该扩展程序，请使用“redux-devtools-extension/developmentOnly”代替“redux-devtools-extension”。

- tonnoz

Answer 7

只需从redux-devtools-extension中简单导入composeWithDevTools，最终用户就不会在生产环境中看到devtool扩展。

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

- Arman

Answer 8

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

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

- Muteshi

Answer 9

有一种简单的方法可以禁用生产日志，

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

完成了！

- TahaArab