Skip to content

Commit

Permalink
Add DevTools to the counter example
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon committed Jul 14, 2015
1 parent 644cd6f commit 0a2a975
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 7 deletions.
26 changes: 20 additions & 6 deletions examples/counter/containers/App.js
Original file line number Diff line number Diff line change
@@ -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/)),

This comment has been minimized.

Copy link
@ngbrown

ngbrown Aug 25, 2015

Contributor

This passes the entire array of matches. Should this code select the parenthesized substring match?

Otherwise, if the debug_sessions changes between first parameter or subsequent parameters (? vs &), the local storage key would change.

    persistState((window.location.href.match(/[?&]debug_session=([^&]+)\b/) || [])[1]),

This would need changed in the readme documentation as well.

This comment has been minimized.

Copy link
@gaearon

gaearon Aug 26, 2015

Author Contributor

Good point, PR is welcome!

createStore
);

const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
const store = finalCreateStore(reducer);

export default class App extends Component {
render() {
return (
<Provider store={store}>
{() => <CounterApp />}
</Provider>
<div>
<Provider store={store}>
{() => <CounterApp />}
</Provider>
<DebugPanel top right bottom>
<DevTools store={store}
monitor={LogMonitor} />
</DebugPanel>
</div>
);
}
}
4 changes: 3 additions & 1 deletion examples/counter/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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']
},
Expand Down

0 comments on commit 0a2a975

Please sign in to comment.