diff --git a/packages/redux-devtools-test-generator/demo/src/js/DevTools.jsx b/packages/redux-devtools-test-generator/demo/src/js/DevTools.jsx
new file mode 100644
index 00000000..2cee7cdb
--- /dev/null
+++ b/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(
+
+ [
+ {
+ name: 'Test',
+ component: TestGenerator,
+ },
+ ...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-test-generator/demo/src/js/getOptions.js b/packages/redux-devtools-test-generator/demo/src/js/getOptions.js
index f18e133d..b26e8222 100644
--- a/packages/redux-devtools-test-generator/demo/src/js/getOptions.js
+++ b/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,
- supportImmutable: window.location.search.indexOf('immutable') !== -1,
+ useExtension: location.search.indexOf('ext') !== -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,
};
}
diff --git a/packages/redux-devtools-test-generator/demo/src/js/index.js b/packages/redux-devtools-test-generator/demo/src/js/index.js
index d2f8d902..da3e7cfb 100644
--- a/packages/redux-devtools-test-generator/demo/src/js/index.js
+++ b/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 { createStore, applyMiddleware, compose, combineReducers } from 'redux';
+import createRootReducer from './reducers';
+import { createStore, applyMiddleware, compose } from 'redux';
import logger from 'redux-logger';
-import { Router, Route, browserHistory } from 'react-router';
-import {
- syncHistoryWithStore,
- routerReducer,
- 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 { Route } from 'react-router';
+import { createBrowserHistory } from 'history';
+import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
+import { persistState } from 'redux-devtools';
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(
-
- [
- {
- name: 'Test',
- component: TestGenerator,
- },
- ...defaultTabs,
- ]}
- />
-
- );
-
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(
- combineReducers({
- ...reducers,
- routing: routerReducer,
- }),
- {},
- enhancer
-);
+const store = createStore(createRootReducer(history), {}, enhancer);
-const history = syncHistoryWithStore(browserHistory, store);
-
-const handleRouterUpdate = () => {
- renderApp(getOptions());
-};
-
-const router = (
-
-
-
-);
-
-const renderApp = (options) => {
- DevTools = getDevTools(options);
- const useDevtoolsExtension =
- !!window.__REDUX_DEVTOOLS_EXTENSION__ && options.useExtension;
-
- return render(
-
+render(
+
+
- {router}
- {!useDevtoolsExtension && }
+
+
+
+ {!useDevtoolsExtension && }
- ,
- document.getElementById('root')
- );
-};
-
-renderApp(getOptions());
+
+ ,
+ document.getElementById('root')
+);
diff --git a/packages/redux-devtools-test-generator/demo/src/js/reducers.js b/packages/redux-devtools-test-generator/demo/src/js/reducers.js
index 1a8947c9..c82bc80c 100644
--- a/packages/redux-devtools-test-generator/demo/src/js/reducers.js
+++ b/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,62 +60,66 @@ function createIterator() {
const DEFAULT_SHUFFLE_ARRAY = [0, 1, null, { id: 1 }, { id: 2 }, 'string'];
-export default {
- timeoutUpdateEnabled: (state = false, action) =>
- action.type === 'TOGGLE_TIMEOUT_UPDATE'
- ? action.timeoutUpdateEnabled
- : state,
- store: (state = 0, action) =>
- action.type === 'INCREMENT' ? state + 1 : state,
- undefined: (state = { val: undefined }) => state,
- null: (state = null) => state,
- func: (state = () => {}) => state,
- array: (state = [], action) =>
- action.type === 'PUSH'
- ? [...state, Math.random()]
- : action.type === 'POP'
- ? state.slice(0, state.length - 1)
- : action.type === 'REPLACE'
- ? [Math.random(), ...state.slice(1)]
- : state,
- hugeArrays: (state = [], action) =>
- action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,
- hugeObjects: (state = [], action) =>
- action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,
- iterators: (state = [], action) =>
- action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,
- nested: (state = NESTED, action) =>
- action.type === 'CHANGE_NESTED'
- ? {
- ...state,
- long: {
- nested: [
- {
- path: {
- to: {
- a: state.long.nested[0].path.to.a + '!',
+const createRootReducer = (history) =>
+ combineReducers({
+ router: connectRouter(history),
+ timeoutUpdateEnabled: (state = false, action) =>
+ action.type === 'TOGGLE_TIMEOUT_UPDATE'
+ ? action.timeoutUpdateEnabled
+ : state,
+ store: (state = 0, action) =>
+ action.type === 'INCREMENT' ? state + 1 : state,
+ undefined: (state = { val: undefined }) => state,
+ null: (state = null) => state,
+ func: (state = () => {}) => state,
+ array: (state = [], action) =>
+ action.type === 'PUSH'
+ ? [...state, Math.random()]
+ : action.type === 'POP'
+ ? state.slice(0, state.length - 1)
+ : action.type === 'REPLACE'
+ ? [Math.random(), ...state.slice(1)]
+ : state,
+ hugeArrays: (state = [], action) =>
+ action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,
+ hugeObjects: (state = [], action) =>
+ action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,
+ iterators: (state = [], action) =>
+ action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,
+ nested: (state = NESTED, action) =>
+ action.type === 'CHANGE_NESTED'
+ ? {
+ ...state,
+ long: {
+ nested: [
+ {
+ path: {
+ to: {
+ a: state.long.nested[0].path.to.a + '!',
+ },
},
},
- },
- ],
- },
- }
- : state,
- recursive: (state = [], action) =>
- action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,
- immutables: (state = [], action) =>
- action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,
- immutableNested: (state = IMMUTABLE_NESTED, action) =>
- action.type === 'CHANGE_IMMUTABLE_NESTED'
- ? state.updateIn(
- ['long', 'nested', 0, 'path', 'to', 'a'],
- (str) => str + '!'
- )
- : state,
- addFunction: (state = null, action) =>
- action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,
- addSymbol: (state = null, action) =>
- action.type === 'ADD_SYMBOL' ? { s: window.Symbol('symbol') } : state,
- shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
- action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
-};
+ ],
+ },
+ }
+ : state,
+ recursive: (state = [], action) =>
+ action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,
+ immutables: (state = [], action) =>
+ action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,
+ immutableNested: (state = IMMUTABLE_NESTED, action) =>
+ action.type === 'CHANGE_IMMUTABLE_NESTED'
+ ? state.updateIn(
+ ['long', 'nested', 0, 'path', 'to', 'a'],
+ (str) => str + '!'
+ )
+ : state,
+ addFunction: (state = null, action) =>
+ action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,
+ addSymbol: (state = null, action) =>
+ 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;
diff --git a/packages/redux-devtools-test-generator/package.json b/packages/redux-devtools-test-generator/package.json
index e90a7be8..0758e859 100644
--- a/packages/redux-devtools-test-generator/package.json
+++ b/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"