Add DevTools to the counter example

This commit is contained in:
Dan Abramov 2015-07-15 00:11:55 +03:00
parent 644cd6fab6
commit 0a2a97556e
2 changed files with 23 additions and 7 deletions

View File

@ -1,20 +1,34 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import CounterApp from './CounterApp'; 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 thunk from 'redux-thunk';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import * as reducers from '../reducers'; 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 reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer); const store = finalCreateStore(reducer);
export default class App extends Component { export default class App extends Component {
render() { render() {
return ( return (
<Provider store={store}> <div>
{() => <CounterApp />} <Provider store={store}>
</Provider> {() => <CounterApp />}
</Provider>
<DebugPanel top right bottom>
<DevTools store={store}
monitor={LogMonitor} />
</DebugPanel>
</div>
); );
} }
} }

View File

@ -19,7 +19,9 @@ module.exports = {
], ],
resolve: { resolve: {
alias: { 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'] extensions: ['', '.js']
}, },