redux-devtools中缺少react

Question

我是比较新的反应和webpack，我刚刚开始了一个新的项目来工作。要配置DevTool，我们有：

export function renderDevTools(store) {
    if (__DEV__) {
        let {DevTools, DebugPanel, LogMonitor} = require('redux-devtools/lib/react');
        return (
            <DebugPanel top right bottom>
            <DevTools store={store} monitor={LogMonitor} />
            </DebugPanel>
        );
    }
    return null;
}

从node_module，我可以看到：

\node_modules\redux-devtools\lib\

有

createDevTools.js
index.js
persistState.js

但是这个文件夹中没有react.js，所以运行代码会提供：

ERROR in ./app/utils/devTools.js
Module not found: Error: Cannot resolve module 'redux-devtools/lib/react'

我试过了

npm install redux-devtools

但文件中仍然没有反应。这是一个遗留代码，当我尝试运行它时，它不起作用。我想知道哪里出了问题？

Answer 1

此代码用于redux-devtools@2。在redux-devtools@3中，监视器被解耦为redux-devtools-log-monitor和redux-devtools-dock-monitor，您还必须安装这些监视器并将它们添加到项目中，如医生们中所示。

此外，您还必须在__DEV__中将true设置为webpack.config (对于开发和生产来说，这应该是不同的)：

plugins: [
  new webpack.DefinePlugin({
    '__DEV__': true
  })
],

一个更简单的方法不是直接将它包含到应用程序中，而是使用Chrome / Firefox扩展。然后，您可以将其添加到Redux商店只有一行代码中。

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

在本例中，请确保删除与Redux DevTools相关的所有其他内容。

如果您使用的是扩展，您也可以在生产没有任何边缘情况中使用它，否则一定要从生产包中删除它。