mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-10 19:56:54 +03:00
Add DevTools to the counter example
This commit is contained in:
parent
644cd6fab6
commit
0a2a97556e
|
@ -1,20 +1,34 @@
|
|||
import React, { Component } from 'react';
|
||||
import CounterApp from './CounterApp';
|
||||
import { createStore, applyMiddleware, combineReducers } from 'redux';
|
||||
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
|
||||
import { devTools, persistState } from 'redux-devtools';
|
||||
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
|
||||
import thunk from 'redux-thunk';
|
||||
import { Provider } from 'react-redux';
|
||||
import * as reducers from '../reducers';
|
||||
|
||||
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
|
||||
const finalCreateStore = compose(
|
||||
applyMiddleware(thunk),
|
||||
devTools(),
|
||||
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
|
||||
createStore
|
||||
);
|
||||
|
||||
const reducer = combineReducers(reducers);
|
||||
const store = createStoreWithMiddleware(reducer);
|
||||
const store = finalCreateStore(reducer);
|
||||
|
||||
export default class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Provider store={store}>
|
||||
{() => <CounterApp />}
|
||||
</Provider>
|
||||
<DebugPanel top right bottom>
|
||||
<DevTools store={store}
|
||||
monitor={LogMonitor} />
|
||||
</DebugPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,7 +19,9 @@ module.exports = {
|
|||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'redux-devtools': path.join(__dirname, '..', '..', 'src')
|
||||
'redux-devtools/lib': path.join(__dirname, '..', '..', 'src'),
|
||||
'redux-devtools': path.join(__dirname, '..', '..', 'src'),
|
||||
'react': path.join(__dirname, 'node_modules', 'react')
|
||||
},
|
||||
extensions: ['', '.js']
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue
Block a user