From 0a2a97556e252bfad822ca438923774bc8b932a4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 15 Jul 2015 00:11:55 +0300
Subject: [PATCH] Add DevTools to the counter example

---
 examples/counter/containers/App.js | 26 ++++++++++++++++++++------
 examples/counter/webpack.config.js |  4 +++-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/examples/counter/containers/App.js b/examples/counter/containers/App.js
index 970195d2..4da345c9 100644
--- a/examples/counter/containers/App.js
+++ b/examples/counter/containers/App.js
@@ -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 (
-      <Provider store={store}>
-        {() => <CounterApp />}
-      </Provider>
+      <div>
+        <Provider store={store}>
+          {() => <CounterApp />}
+        </Provider>
+        <DebugPanel top right bottom>
+          <DevTools store={store}
+                    monitor={LogMonitor} />
+        </DebugPanel>
+      </div>
     );
   }
 }
diff --git a/examples/counter/webpack.config.js b/examples/counter/webpack.config.js
index 85335866..845def96 100644
--- a/examples/counter/webpack.config.js
+++ b/examples/counter/webpack.config.js
@@ -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']
   },