diff --git a/packages/redux-devtools-inspector/demo/src/js/DevTools.jsx b/packages/redux-devtools-inspector/demo/src/js/DevTools.jsx
new file mode 100644
index 00000000..54ec696b
--- /dev/null
+++ b/packages/redux-devtools-inspector/demo/src/js/DevTools.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { createDevTools } from 'redux-devtools';
+import DockMonitor from 'redux-devtools-dock-monitor';
+import DevtoolsInspector from '../../../src/DevtoolsInspector';
+import getOptions from './getOptions';
+
+const CustomComponent = () => (
+
+);
+
+export const getDevTools = (location) =>
+ createDevTools(
+
+ [
+ {
+ name: 'Custom Tab',
+ component: CustomComponent,
+ },
+ ...defaultTabs,
+ ]}
+ />
+
+ );
+
+const UnconnectedDevTools = ({ location }) => {
+ const DevTools = getDevTools(location);
+ return ;
+};
+
+const mapStateToProps = (state) => ({
+ location: state.router.location,
+});
+
+export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools);
diff --git a/packages/redux-devtools-inspector/demo/src/js/index.js b/packages/redux-devtools-inspector/demo/src/js/index.js
index 50e7e412..0d20e0c7 100644
--- a/packages/redux-devtools-inspector/demo/src/js/index.js
+++ b/packages/redux-devtools-inspector/demo/src/js/index.js
@@ -9,59 +9,19 @@ import logger from 'redux-logger';
import { Route } from 'react-router';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
-import { createDevTools, persistState } from 'redux-devtools';
-import DevtoolsInspector from '../../../src/DevtoolsInspector';
-import DockMonitor from 'redux-devtools-dock-monitor';
+import { persistState } from 'redux-devtools';
import getOptions from './getOptions';
+import { ConnectedDevTools, getDevTools } from './DevTools';
function getDebugSessionKey() {
const matches = window.location.href.match(/[?&]debug_session=([^]+)\b/);
return matches && matches.length > 0 ? matches[1] : null;
}
-const CustomComponent = () => (
-
-);
-
-const getDevTools = ({ location }) =>
- createDevTools(
-
- [
- {
- name: 'Custom Tab',
- component: CustomComponent,
- },
- ...defaultTabs,
- ]}
- />
-
- );
-
const ROOT =
process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';
-const DevTools = getDevTools({ location: window.location });
+const DevTools = getDevTools(window.location);
const history = createBrowserHistory();
@@ -87,7 +47,7 @@ render(
- {!useDevtoolsExtension && }
+ {!useDevtoolsExtension && }
,