Update counter example

examples/counter/containers/App.js

@@ -1,40 +0,0 @@
-import React, { Component } from 'react';
-import CounterApp from './CounterApp';
-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 finalCreateStore = compose(
-  applyMiddleware(thunk),
-  devTools(),
-  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
-)(createStore);
-
-const reducer = combineReducers(reducers);
-const store = finalCreateStore(reducer);
-
-if (module.hot) {
-  module.hot.accept('../reducers', () =>
-    store.replaceReducer(combineReducers(require('../reducers')))
-  );
-}
-
-export default class App extends Component {
-  render() {
-    return (
-      <div>
-        <Provider store={store}>
-          {() => <CounterApp />}
-        </Provider>
-        <DebugPanel top right bottom>
-          <DevTools store={store}
-                    monitor={LogMonitor}
-                    visibleOnLoad={true} />
-        </DebugPanel>
-      </div>
-    );
-  }
-}

examples/counter/index.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import App from './containers/App';
-
-React.render(
-  <App />,
-  document.getElementById('root')
-);

examples/counter/package.json

@@ -16,16 +16,20 @@
   },
   "homepage": "https://github.com/gaearon/redux-devtools#readme",
   "dependencies": {
-    "react": "^0.13.3",
+    "react": "^0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1",
     "react-redux": "^3.0.0",
     "redux": "^3.0.0",
+    "redux-devtools-log-monitor": "^1.0.0-alpha-1",
     "redux-thunk": "^1.0.0"
   },
   "devDependencies": {
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
     "node-libs-browser": "^0.5.2",
+    "react-dock": "0.0.3",
     "react-hot-loader": "^1.3.0",
+    "redux-devtools-log-monitor": "^1.0.0-alpha",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

examples/counter/reducers/index.js

@@ -1 +0,0 @@
-export { default as counter } from './counter';

examples/counter/src/containers/Root.dev.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import CounterApp from './CounterApp';
+import Dock from 'react-dock';
+import LogMonitor from 'redux-devtools-log-monitor';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <div>
+        <Provider store={store}>
+          <CounterApp />
+        </Provider>
+        <Dock position='right' isVisible dimMode='none'>
+          <LogMonitor store={store.devToolsStore} />
+        </Dock>
+      </div>
+    );
+  }
+}

examples/counter/src/containers/Root.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./Root.prod');
+} else {
+  module.exports = require('./Root.dev');
+}

examples/counter/src/containers/Root.prod.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import CounterApp from './CounterApp';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <Provider store={store}>
+        <CounterApp />
+      </Provider>
+    );
+  }
+}

examples/counter/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from 'react-dom';
+import configureStore from './store/configureStore';
+import Root from './containers/Root';
+
+const store = configureStore();
+
+render(
+  <Root store={store} />,
+  document.getElementById('root')
+);

examples/counter/src/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import counter from './counter';
+
+const rootReducer = combineReducers({
+  counter
+});
+
+export default rootReducer;

examples/counter/src/store/configureStore.dev.js

@@ -0,0 +1,22 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { devTools, persistState } from 'redux-devtools';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk),
+  devTools(),
+  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
+)(createStore);
+
+export default function configureStore(initialState) {
+  const store = finalCreateStore(rootReducer);
+
+  if (module.hot) {
+    module.hot.accept('../reducers', () =>
+      store.replaceReducer(require('../reducers'))
+    );
+  }
+
+  return store;
+}

examples/counter/src/store/configureStore.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === 'development') {
+  module.exports = require('./configureStore.prod');
+} else {
+  module.exports = require('./configureStore.dev');
+}

examples/counter/src/store/configureStore.prod.js

@@ -0,0 +1,11 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk)
+)(createStore);
+
+export default function configureStore(initialState) {
+  return finalCreateStore(rootReducer);
+}

examples/counter/webpack.config.js

@@ -6,7 +6,7 @@ module.exports = {
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     'webpack/hot/only-dev-server',
-    './index'
+    './src/index'
   ],
   output: {
     path: path.join(__dirname, 'dist'),
@@ -18,11 +18,9 @@ module.exports = {
   ],
   resolve: {
     alias: {
-      'redux-devtools/lib': path.join(__dirname, '..', '..', 'src'),
       'redux-devtools': path.join(__dirname, '..', '..', 'src'),
       'react': path.join(__dirname, 'node_modules', 'react')
-    },
-    extensions: ['', '.js']
+    }
   },
   resolveLoader: {
     'fallback': path.join(__dirname, 'node_modules')
@@ -32,7 +30,7 @@ module.exports = {
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       exclude: /node_modules/,
-      include: __dirname
+      include: path.join(__dirname, 'src')
     }, {
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],