如何在生产构建或断开连接中排除/禁用 Redux devtools? [英] How to exclude / disable Redux devtools in production build or disconnect?

问题描述

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

As its name suggests devtools should be visible or accessible only during development and not in production. I don't want my end users playing with the state and dispatcher or seeing what's going on under the hood.

有没有办法在生产版本中隐藏 Redux Devtools 或断开它?

Is there a way to hide Redux Devtools or disconnect it in the production build?

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

I'm looking answers for Vanilla Redux. Not Redux Saga, Redux Thunk or Rematch.

推荐答案

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

Though I later found out that this question is longer valid for new versions of Redux, some readers were unaware of it, since nobody has pointed this out and everyone here was talking about excluding __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ from compose enhancers during Redux Saga setup.

我发现有几个不同的 Redux Devtools

这个来自 Dan Abramov

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

reduxjs/redux-devtools is the NPM package which you want to add in your enhancers to use Redux Devtools in your project.

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

For Manual integration and exclusion in production checkout this page.

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

From the previous answers and comments to my old boilerplate code, this was the one used by all of them.

您通过 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 将此开发工具添加到您的增强器中.

You add this devtools by __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ to your enhancers.

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

Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and React Native apps built on Electron. This one is sweet. It is a cross-platform Electron app for inspecting React and React Native apps, including app state, API requests, perf, errors, sagas, and action dispatching.

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

You just plug it as your dev-dependency, so it will add nothing to the production build.

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

For the ones using Redux with Rematch, it's a different story.

Rematch 与 Redux Devtools 一起开箱即用.无需配置.

Rematch works with Redux Devtools out of the box. No configuration required.

init() // initialized with devtools

对于手动集成，

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

您也可以使用 redux-devtools-extension 或 reactotron 进行重新匹配.查看此页面了解更多信息.

You can also make rematch use redux-devtools-extension or reactotron. Checkout this page for more info.

这篇关于如何在生产构建或断开连接中排除/禁用 Redux devtools?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！