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 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>
);
}
}

View File

@ -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']
},