reactjs - 隐藏生产中的状态结构

Question

我正在使用react-redux 中的Provider。在生产中，如果我使用 $r.store.getState() 安装了 React chrome 扩展，我可以看到状态结构。如何在生产中隐藏这种行为？

Answer 1

您可以使用 Object.defineProperty 函数使全局 $r 变量不可可写:

Object.defineProperty(window, '$r', {
  writable: false
});

在这种情况下，React Devtools 无法为 $r 变量赋值，因此没有人可以使用 React Devtools 访问存储实例。

编辑:

当设置 writable: false 属性时，React Devtools 会抛出一个错误，即 $r 属性不可写。为了避免该错误，您可以通过这种方式为该变量设置常量值:

Object.defineProperty(window, '$r', {
  value: {}
});

在这种情况下，$r 值将始终等于 {} 并且控制台将保持静默。