mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-26 03:23:55 +03:00
e9da5fc411
* fix(deps): update react * Fix * Use createRoot * Update tests * Format * Fix test Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Nathan Bierema <nbierema@gmail.com>
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { Container } from '@redux-devtools/ui';
|
|
import { Provider } from 'react-redux';
|
|
import {
|
|
createStore,
|
|
applyMiddleware,
|
|
compose,
|
|
StoreEnhancer,
|
|
StoreEnhancerStoreCreator,
|
|
} from 'redux';
|
|
import logger from 'redux-logger';
|
|
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
|
import { persistState } from '@redux-devtools/core';
|
|
import DemoApp from './DemoApp';
|
|
import { rootReducer } from './reducers';
|
|
import getOptions from './getOptions';
|
|
import { ConnectedDevTools, getDevTools } from './DevTools';
|
|
|
|
function getDebugSessionKey() {
|
|
const matches = /[?&]debug_session=([^&#]+)\b/.exec(window.location.href);
|
|
return matches && matches.length > 0 ? matches[1] : null;
|
|
}
|
|
|
|
const ROOT =
|
|
process.env.NODE_ENV === 'production'
|
|
? '/redux-devtools-inspector-monitor-test-tab/'
|
|
: '/';
|
|
|
|
const DevTools = getDevTools(window.location);
|
|
|
|
const useDevtoolsExtension =
|
|
!!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) &&
|
|
getOptions(window.location).useExtension;
|
|
|
|
const enhancer = compose(
|
|
applyMiddleware(logger),
|
|
(next: StoreEnhancerStoreCreator) => {
|
|
const instrument = useDevtoolsExtension
|
|
? (
|
|
window as unknown as {
|
|
__REDUX_DEVTOOLS_EXTENSION__(): StoreEnhancer;
|
|
}
|
|
).__REDUX_DEVTOOLS_EXTENSION__()
|
|
: DevTools.instrument();
|
|
return instrument(next);
|
|
},
|
|
persistState(getDebugSessionKey())
|
|
);
|
|
|
|
const store = createStore(rootReducer, enhancer);
|
|
|
|
const root = createRoot(document.getElementById('root')!);
|
|
root.render(
|
|
<Provider store={store}>
|
|
<BrowserRouter>
|
|
<Container
|
|
themeData={{
|
|
theme: 'default',
|
|
scheme: 'default',
|
|
colorPreference: 'auto',
|
|
}}
|
|
>
|
|
<Routes>
|
|
<Route path={ROOT} element={<DemoApp />} />
|
|
</Routes>
|
|
{!useDevtoolsExtension && <ConnectedDevTools />}
|
|
</Container>
|
|
</BrowserRouter>
|
|
</Provider>
|
|
);
|