Redux DevTools无法呈现

时间:2018-12-12 22:43:39

标签: react-redux redux-devtools

我将redux-devtoolsredux-devtools-dock-monitorredux-devtools-log-monitor一起使用。

我遵循了文档。但是,在控制台中,我收到此错误:

index.js:1452 Redux DevTools could not render. 
You must pass the Redux store to <DevTools> either as a "store" prop 
or by wrapping it in a <Provider store={store}>.

这是我的根组件:

const Root = () => {
   return (
       <Provider store={store}>
            <div>
                <h1>Hello !!!</h1>
                <DevTools/>
            </div>
       </Provider>
   );
};

export default Root;

此外,我也收到此警告:

redux-devtools@3.4.2" has incorrect peer dependency "react-redux@^4.0.0 || ^5.0.0".

我已经将redux-devtools-log-monitorredux-devtools-dock-monitor用作监视器

2 个答案:

答案 0 :(得分:1)

react-redux@6中,商店不是通过旧版React上下文传递的,您应该通过以下道具明确地指定商店:

<DevTools store={store}/>

更新1:它对我有用,因为我在主项目中有react-redux@6,但是对于react-redux@5依赖项有redux-devtools。因此,如果有人需要一种快速的解决方法(无论如何,您都不应在生产中包括DevTools组件),直到得到支持,只需执行cd ./node_modules/redux-devtools && npm i react-redux@5

更新2:redux-devtools@3.5.0刚刚发布,它增加了对react-redux@6的支持。

答案 1 :(得分:1)

我已经尝试过该建议,但现在又给出了另一个错误(我正在使用DockMonitor)。即这是我的设置。

<DockMonitor toggleVisibilityKey='ctrl-h'
  changePositionKey='ctrl-q'
  changeMonitorKey='ctrl-m' >
  <LogMonitor />
</DockMonitor>


<Provider store={store}>
  <App />
  <DevTools store={store} />
</Provider>

产生以下错误:

  

未捕获的错误:传递道具中的redux存储已被删除,并且不执行任何操作。要将自定义Redux存储区用于特定组件,请使用React.createContext()创建自定义React上下文,并将上下文对象传递给React-Redux的Provider和特定组件,例如:。您还可以通过{context:MyContext}选项进行连接