Merge pull request reactjs#70 from geowarin/dev-tools

Add Dev tools

examples/basic/app.js

@@ -1,31 +1,41 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const { createStore, combineReducers } = require('redux');
+const { compose, createStore, combineReducers } = require('redux');
 const { Provider } = require('react-redux');
 const { Router, Route, IndexRoute } = require('react-router');
 const createHistory = require('history/lib/createHashHistory');
 const { syncReduxAndRouter, routeReducer } = require('redux-simple-router');
+import { devTools } from 'redux-devtools';
+const { DevTools, DebugPanel, LogMonitor } = require('redux-devtools/lib/react');
 
 const reducers = require('./reducers');
 const { App, Home, Foo, Bar } = require('./components');
 
 const reducer = combineReducers(Object.assign({}, reducers, {
   routing: routeReducer
 }));
-const store = createStore(reducer);
+const finalCreateStore = compose(
+  devTools()
+)(createStore);
+const store = finalCreateStore(reducer);
 const history = createHistory();
 
 syncReduxAndRouter(history, store);
 
 ReactDOM.render(
   <Provider store={store}>
-    <Router history={history}>
-      <Route path="/" component={App}>
-        <IndexRoute component={Home}/>
-        <Route path="foo" component={Foo}/>
-        <Route path="bar" component={Bar}/>
-      </Route>
-    </Router>
+    <div>
+      <Router history={history}>
+        <Route path="/" component={App}>
+          <IndexRoute component={Home}/>
+          <Route path="foo" component={Foo}/>
+          <Route path="bar" component={Bar}/>
+        </Route>
+      </Router>
+      <DebugPanel top right bottom>
+        <DevTools store={store} monitor={LogMonitor} />
+      </DebugPanel>
+    </div>
   </Provider>,
   document.getElementById('mount')
 );

examples/basic/components/App.js

@@ -1,9 +1,9 @@
 const React = require('react');
 const { Link } = require('react-router');
 const { connect } = require('react-redux');
-const { updatePath } = require('redux-simple-router');
+const { pushPath } = require('redux-simple-router');
 
-function App({ updatePath, children }) {
+function App({ pushPath, children }) {
   return (
     <div>
       <header>
@@ -16,7 +16,7 @@ function App({ updatePath, children }) {
         <Link to="/bar">Bar</Link>
       </header>
       <div>
-        <button onClick={() => updatePath('/foo')}>Go to /foo</button>
+        <button onClick={() => pushPath('/foo')}>Go to /foo</button>
       </div>
       <div style={{marginTop: '1.5em'}}>{children}</div>
     </div>
@@ -25,5 +25,5 @@ function App({ updatePath, children }) {
 
 module.exports = connect(
   null,
-  { updatePath }
+  { pushPath }
 )(App);

examples/basic/package.json

@@ -15,6 +15,10 @@
     "babel-loader": "^6.2.0",
     "babel-preset-es2015": "^6.1.18",
     "babel-preset-react": "^6.1.18",
+    "redux-devtools": "^2.1.5",
     "webpack": "^1.12.6"
+  },
+  "scripts": {
+    "start": "webpack --watch"
   }
 }