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

Question

顾名思义，devtools应该仅在开发过程中才可见或可访问，而不是在生产中。我不希望我的最终用户与州和调度员打交道，也不希望看到幕后发生的事情。

是否可以在生产版本中隐藏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

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

我发现几乎没有什么不同的[[Redux Devtools

1。 reduxjs/redux-devtools

这是Dan Abramov的官方仓库中的信息>

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

用于在生产结帐时手动集成和排除此reduxjs/redux-devtools。

2。 page

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

您通过zalmoxisus/redux-devtools-extension将这个devtools添加到增强器中。

__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

并且在生产中应该将其删除。

3。

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

Reactotron是一个macOS，Windows和Linux应用程序，用于检查在Electron上构建的React JS和React Native应用程序。这个很甜。这是一个跨平台的Electron应用程序，用于检查React和React Native应用程序，包括应用程序状态，API请求，性能，错误，错误和动作调度。

您只是将其作为您的开发依赖项插入，因此它不会对生产版本产生任何影响。

---

对于那些将Redux与infinitered/reactotron一起使用的人，情况就不同了。

具有重新匹配功能的Redux

Rematch可与Redux Devtools一起使用。无需配置。

Rematch

对于手动集成，

init() // initialized with devtools

您还可以使用init({
    redux: {
        devtoolOptions: {
            disabled: production(),
        },
    },
})
或redux-devtools-extension进行重新匹配。签出此reactotron了解更多信息。