更新到最新的 Redux Dev Tools 扩展后，我收到：“Redux 和 Redux DevTools 定义的 Symbol.observable 不匹配。”

Question

对于从 redux dev 工具 chrome 扩展获取最新更新后的一些未知问题，我收到以下警告消息：

Redux 和 Redux DevTools 定义的 Symbol.observable 不匹配。如果未加载 DevTools，这可能会导致您的应用程序表现不同。在导入 Redux 之前考虑对 Symbol.observable 进行polyfill，或者完全避免对 Symbol.observable 进行polyfill。

通过阅读错误消息，我了解到 redux 和 redux 开发工具应该使用相同的 Symbol.observable，但事实并非如此。这很奇怪，因为我没有更改代码中的任何内容，并且我按照文档使用代码。

我的问题是你是否知道我应该朝哪个方向走？这是一个我们只需要报告的 Chrome 扩展错误吗？

我正在使用名为Redux DevTools 的最新 chrome 扩展。我注意到，如果我卸载 chrome 开发工具扩展，则不会再出现此警告消息。

我的代码如下所示：

  // The redux-devtools-extension is renamed to this npm package
  import { composeWithDevTools } from "@redux-devtools/extension"; 

  // Some code here ...

  const composeEnhancersPersonalProject = composeWithDevTools({
    name: `My Project`,
  });

  // Some other code here ...
  
  const myStore = createStore(
    persistedReducer,
    composeEnhancersPersonalProject(
      applyMiddleware(serverRequestMiddleware, rehydrateMiddleware)
    )
  );

Answer 1

经过几个小时的研究和反复试验，我终于找到了解决此警告的方法。

根据github 评论，您可以在 React/Redux 项目的开头添加以下行：

// eslint-disable-next-line
import Symbol_observable from 'symbol-observable';

似乎出于一个奇怪的原因，我的项目没有填充可观察的符号，因此如果我们添加 npm 库符号可观察，警告就会消失。

好消息是，尝试create-react-app使用模板的最新项目redux（例如npx create-react-app my-app --template redux），问题不再存在。所以它应该与 @markerikson 在我的项目中特别提到的版本组合有关。