1

I am using redux-devtools with redux-devtools-dock-monitor and redux-devtools-log-monitor.

I followed documentation. However, in the console I receive this error:

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}>.

Here is my Root component:

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

export default Root;

Additionally, I am getting this warning too:

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

I have used redux-devtools-log-monitor and redux-devtools-dock-monitor as monitors

Safarali
  • 11
  • 1

2 Answers2

1

In react-redux@6, the store is not passed via legacy React context and you should specify it explecitely via props like so:

<DevTools store={store}/>

Update 1: It was working for me because I had react-redux@6 in main project, but react-redux@5 for redux-devtools dependency. So if someone needs a quick workaround (you shouldn't include DevTools component in production anyway) till it will be supported, just do: cd ./node_modules/redux-devtools && npm i react-redux@5.

Update 2: redux-devtools@3.5.0 was just published, which adds support for react-redux@6.

Zalmoxisus
  • 161
  • 1
  • 4
1

I've tried the suggestion and now it gives another error (I'm using the DockMonitor). Ie this is my setup.

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


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

Produces the following error:

Uncaught Error: Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect

dnp
  • 206
  • 3
  • 6