mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-25 15:40:06 +03:00
stash
This commit is contained in:
parent
7924f32f3e
commit
92675e1fba
|
@ -47,8 +47,8 @@ render(
|
|||
<ConnectedRouter history={history}>
|
||||
<Route path={ROOT}>
|
||||
<DemoApp />
|
||||
{!useDevtoolsExtension && <ConnectedDevTools />}
|
||||
</Route>
|
||||
{!useDevtoolsExtension && <ConnectedDevTools />}
|
||||
</ConnectedRouter>
|
||||
</Provider>,
|
||||
document.getElementById('root')
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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);
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
<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(
|
||||
combineReducers({
|
||||
...reducers,
|
||||
routing: routerReducer,
|
||||
}),
|
||||
{},
|
||||
enhancer
|
||||
);
|
||||
const store = createStore(createRootReducer(history), {}, enhancer);
|
||||
|
||||
const history = syncHistoryWithStore(browserHistory, store);
|
||||
|
||||
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}>
|
||||
render(
|
||||
<Provider store={store}>
|
||||
<ConnectedRouter history={history}>
|
||||
<Container
|
||||
themeData={{ theme: 'default', scheme: 'default', light: true }}
|
||||
>
|
||||
{router}
|
||||
{!useDevtoolsExtension && <DevTools />}
|
||||
<Route path={ROOT}>
|
||||
<DemoApp />
|
||||
</Route>
|
||||
{!useDevtoolsExtension && <ConnectedDevTools />}
|
||||
</Container>
|
||||
</Provider>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
};
|
||||
|
||||
renderApp(getOptions());
|
||||
</ConnectedRouter>
|
||||
</Provider>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user