【问题标题】:Redux DevTools could not renderRedux DevTools 无法渲染
【发布时间】:2018-12-12 22:43:39
【问题描述】:

我将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 作为监视器

【问题讨论】:

标签: react-redux redux-devtools


【解决方案1】:

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

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


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

产生以下错误:

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

【讨论】:

  • 是的,不支持。我用解决方法编辑了我的答案。
【解决方案2】:

react-redux@6 中,store 不是通过遗留的 React 上下文传递的,你应该像这样通过 props 明确指定它:

<DevTools store={store}/>

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-09
    • 2020-07-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-19
    相关资源
    最近更新 更多