stash

packages/redux-devtools-inspector/demo/src/js/index.js

@@ -47,8 +47,8 @@ render(
     <ConnectedRouter history={history}>
       <Route path={ROOT}>
         <DemoApp />
-        {!useDevtoolsExtension && <ConnectedDevTools />}
       </Route>
+      {!useDevtoolsExtension && <ConnectedDevTools />}
     </ConnectedRouter>
   </Provider>,
   document.getElementById('root')

packages/redux-devtools-test-generator/demo/src/js/DemoApp.jsx

@@ -26,7 +26,7 @@ const ROOT = '/'; // process.env.NODE_ENV === 'production' ? '/' : '/';
 
 class DemoApp extends React.Component {
   render() {
-    const options = getOptions();
+    const options = getOptions(this.props.router.location);
 
     return (
       <div style={styles.wrapper}>

packages/redux-devtools-test-generator/demo/src/js/DevTools.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { createDevTools } from 'redux-devtools';
+import DevtoolsInspector from 'redux-devtools-inspector';
+import DockMonitor from 'redux-devtools-dock-monitor';
+import getOptions from './getOptions';
+import TestGenerator from '../../../src';
+
+export const getDevTools = (location) =>
+  createDevTools(
+    <DockMonitor
+      defaultIsVisible
+      toggleVisibilityKey="ctrl-h"
+      changePositionKey="ctrl-q"
+      changeMonitorKey="ctrl-m"
+    >
+      <DevtoolsInspector
+        theme={getOptions(location).theme}
+        shouldPersistState
+        invertTheme={!getOptions(location).dark}
+        supportImmutable={getOptions(location).supportImmutable}
+        tabs={(defaultTabs) => [
+          {
+            name: 'Test',
+            component: TestGenerator,
+          },
+          ...defaultTabs,
+        ]}
+      />
+    </DockMonitor>
+  );
+
+const UnconnectedDevTools = ({ location }) => {
+  const DevTools = getDevTools(location);
+  return <DevTools />;
+};
+
+const mapStateToProps = (state) => ({
+  location: state.router.location,
+});
+
+export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools);

packages/redux-devtools-test-generator/demo/src/js/getOptions.js

@@ -1,11 +1,11 @@
-export default function getOptions() {
+export default function getOptions(location) {
   return {
-    useExtension: window.location.search.indexOf('ext') !== -1,
+    useExtension: location.search.indexOf('ext') !== -1,
-    supportImmutable: window.location.search.indexOf('immutable') !== -1,
+    supportImmutable: location.search.indexOf('immutable') !== -1,
     theme: do {
-      const match = window.location.search.match(/theme=([^&]+)/);
+      const match = location.search.match(/theme=([^&]+)/);
       match ? match[1] : 'inspector';
     },
-    dark: window.location.search.indexOf('dark') !== -1,
+    dark: location.search.indexOf('dark') !== -1,
   };
 }

packages/redux-devtools-test-generator/demo/src/js/index.js

@@ -5,62 +5,37 @@ import { render } from 'react-dom';
 import { Container } from 'devui';
 import DemoApp from './DemoApp';
 import { Provider } from 'react-redux';
-import reducers from './reducers';
+import createRootReducer from './reducers';
-import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import logger from 'redux-logger';
-import { Router, Route, browserHistory } from 'react-router';
+import { Route } from 'react-router';
-import {
+import { createBrowserHistory } from 'history';
-  syncHistoryWithStore,
+import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
-  routerReducer,
+import { persistState } from 'redux-devtools';
-  routerMiddleware,
-} from 'react-router-redux';
-import { createDevTools, persistState } from 'redux-devtools';
-import DevtoolsInspector from 'redux-devtools-inspector';
-import DockMonitor from 'redux-devtools-dock-monitor';
 import getOptions from './getOptions';
-import TestGenerator from '../../../src';
+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 getDevTools = (options) =>
-  createDevTools(
-    <DockMonitor
-      defaultIsVisible
-      toggleVisibilityKey="ctrl-h"
-      changePositionKey="ctrl-q"
-      changeMonitorKey="ctrl-m"
-    >
-      <DevtoolsInspector
-        theme={options.theme}
-        shouldPersistState
-        invertTheme={!options.dark}
-        supportImmutable={options.supportImmutable}
-        tabs={(defaultTabs) => [
-          {
-            name: 'Test',
-            component: TestGenerator,
-          },
-          ...defaultTabs,
-        ]}
-      />
-    </DockMonitor>
-  );
-
 const ROOT =
-  process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';
+  process.env.NODE_ENV === 'production'
+    ? '/redux-devtools-test-generator/'
+    : '/';
 
-let DevTools = getDevTools(getOptions());
+const DevTools = getDevTools(window.location);
 
-const reduxRouterMiddleware = routerMiddleware(browserHistory);
+const history = createBrowserHistory();
+
+const useDevtoolsExtension =
+  !!window.__REDUX_DEVTOOLS_EXTENSION__ &&
+  getOptions(window.location).useExtension;
 
 const enhancer = compose(
-  applyMiddleware(logger, reduxRouterMiddleware),
+  applyMiddleware(logger, routerMiddleware(history)),
   (...args) => {
-    const useDevtoolsExtension =
-      !!window.__REDUX_DEVTOOLS_EXTENSION__ && getOptions().useExtension;
     const instrument = useDevtoolsExtension
       ? window.__REDUX_DEVTOOLS_EXTENSION__()
       : DevTools.instrument();
@@ -69,43 +44,20 @@ const enhancer = compose(
   persistState(getDebugSessionKey())
 );
 
-const store = createStore(
+const store = createStore(createRootReducer(history), {}, enhancer);
-  combineReducers({
-    ...reducers,
-    routing: routerReducer,
-  }),
-  {},
-  enhancer
-);
 
-const history = syncHistoryWithStore(browserHistory, store);
+render(
-
-const handleRouterUpdate = () => {
-  renderApp(getOptions());
-};
-
-const router = (
-  <Router history={history} onUpdate={handleRouterUpdate}>
-    <Route path={ROOT} component={DemoApp} />
-  </Router>
-);
-
-const renderApp = (options) => {
-  DevTools = getDevTools(options);
-  const useDevtoolsExtension =
-    !!window.__REDUX_DEVTOOLS_EXTENSION__ && options.useExtension;
-
-  return render(
   <Provider store={store}>
+    <ConnectedRouter history={history}>
       <Container
         themeData={{ theme: 'default', scheme: 'default', light: true }}
       >
-        {router}
+        <Route path={ROOT}>
-        {!useDevtoolsExtension && <DevTools />}
+          <DemoApp />
+        </Route>
+        {!useDevtoolsExtension && <ConnectedDevTools />}
       </Container>
+    </ConnectedRouter>
   </Provider>,
   document.getElementById('root')
 );
-};
-
-renderApp(getOptions());

packages/redux-devtools-test-generator/demo/src/js/reducers.js

@@ -1,5 +1,7 @@
 import Immutable from 'immutable';
 import shuffle from 'lodash.shuffle';
+import { combineReducers } from 'redux';
+import { connectRouter } from 'connected-react-router';
 
 const NESTED = {
   long: {
@@ -58,7 +60,9 @@ function createIterator() {
 
 const DEFAULT_SHUFFLE_ARRAY = [0, 1, null, { id: 1 }, { id: 2 }, 'string'];
 
-export default {
+const createRootReducer = (history) =>
+  combineReducers({
+    router: connectRouter(history),
     timeoutUpdateEnabled: (state = false, action) =>
       action.type === 'TOGGLE_TIMEOUT_UPDATE'
         ? action.timeoutUpdateEnabled
@@ -116,4 +120,6 @@ export default {
       action.type === 'ADD_SYMBOL' ? { s: window.Symbol('symbol') } : state,
     shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
       action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
-};
+  });
+
+export default createRootReducer;

packages/redux-devtools-test-generator/package.json

@@ -44,15 +44,18 @@
     "@babel/preset-react": "^7.10.4",
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
+    "connected-react-router": "^6.8.0",
     "css-loader": "^4.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.3",
     "enzyme-to-json": "^3.5.0",
     "expect": "^26.2.0",
     "file-loader": "^6.0.0",
+    "history": "^4.10.1",
     "html-webpack-plugin": "^4.3.0",
     "immutable": "^4.0.0-rc.12",
     "jest": "^26.2.2",
+    "lodash.isequalwith": "^4.4.0",
     "lodash.shuffle": "^4.2.0",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
@@ -64,6 +67,7 @@
     "redux-devtools-inspector": "^0.13.0",
     "redux-logger": "^3.0.6",
     "rimraf": "^3.0.2",
+    "seamless-immutable": "^7.1.4",
     "style-loader": "^1.2.1",
     "webpack": "^4.44.1",
     "webpack-dev-server": "^3.11.0"