Wrap connected monitor in Provider and ReactReduxContext for react-re…

…dux@6
reduxjs · Dec 21, 2018 · fef81b1 · fef81b1
1 parent b80cc9e
commit fef81b1
Showing 1 changed file with 60 additions and 13 deletions.
diff --git a/packages/redux-devtools/src/createDevTools.js b/packages/redux-devtools/src/createDevTools.js
@@ -1,8 +1,24 @@
 import React, { Children, Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { connect, Provider, ReactReduxContext } from 'react-redux';
 import instrument from 'redux-devtools-instrument';
 
+function logError(type) {
+  if (type === 'NoStore') {
+    console.error(
+      '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}>.'
+    );  
+  } else {
+    console.error(
+      'Redux DevTools could not render. Did you forget to include ' +
+      'DevTools.instrument() in your store enhancer chain before ' +
+      'using createStore()?'
+    );
+  }
+}
+
 export default function createDevTools(children) {
   const monitorElement = Children.only(children);
   const monitorProps = monitorElement.props;
@@ -26,12 +42,15 @@ export default function createDevTools(children) {
     constructor(props, context) {
       super(props, context);
 
+      if (ReactReduxContext) {
+        if (this.props.store && !this.props.store.liftedStore) {
+          logError('NoLiftedStore');
+        }
+        return;
+      }
+
       if (!props.store && !context.store) {
-        console.error(
-          '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}>.'
-        );
+        logError('NoStore');
         return;
       }
 
@@ -42,22 +61,50 @@ export default function createDevTools(children) {
       }
 
       if (!this.liftedStore) {
-        console.error(
-          'Redux DevTools could not render. Did you forget to include ' +
-          'DevTools.instrument() in your store enhancer chain before ' +
-          'using createStore()?'
-        );
+        logError('NoLiftedStore');
       }
     }
 
     render() {
+      if (ReactReduxContext) {
+        // For react-redux@6
+        if (this.props.store) {
+          if (!this.props.store.liftedStore) {
+            return null;
+          }
+          return (
+            <Provider store={this.props.store.liftedStore}>
+              <ConnectedMonitor {...monitorProps} />
+            </Provider>
+          );
+        }
+        return(
+          <ReactReduxContext.Consumer>
+          {props => {
+            if (!props || !props.store) {
+              logError('NoStore');
+              return null;
+            }
+            if (!props.store.liftedStore) {
+              logError('NoLiftedStore');
+              return null;
+            }
+           return (
+              <Provider store={props.store.liftedStore}>
+                <ConnectedMonitor {...monitorProps} />
+              </Provider>
+            );
+          }}
+        </ReactReduxContext.Consumer>
+        );
+      }
+
       if (!this.liftedStore) {
         return null;
       }
 
       return (
-        <ConnectedMonitor {...monitorProps}
-                          store={this.liftedStore} />
+        <ConnectedMonitor {...monitorProps} store={this.liftedStore} />
       );
     }
   };