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 = () => ( +
+
Custom Tab Content
+
+); + +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 = () => ( -
-
Custom Tab Content
-
-); - -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 && } ,