Fix examples

examples/counter/package.json

@@ -29,7 +29,7 @@
     "react-hot-loader": "^1.3.0",
     "redux-devtools": "^3.0.0-beta-2",
     "redux-devtools-log-monitor": "^1.0.0-beta-2",
-    "redux-devtools-dock-monitor": "^1.0.0-beta-1",
+    "redux-devtools-dock-monitor": "^1.0.0-beta-2",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

examples/counter/src/store/configureStore.js

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

examples/todomvc/README.md

@@ -1,6 +1,14 @@
 # Redux DevTools TodoMVC example
 
-## Getting Started
+## Running example
 
-1. Install dependencies: `npm i`
+```
-2. Start the development server: `npm start`
+git clone https://github.com/gaearon/redux-devtools.git
+cd redux-devtools
+npm install
+
+cd examples/todomvc
+npm install
+npm start
+open http://localhost:3000
+```

examples/todomvc/containers/App.js

@@ -1,38 +0,0 @@
-import React, { Component } from 'react';
-import TodoApp from './TodoApp';
-import { createStore, combineReducers, compose } from 'redux';
-import { devTools, persistState } from 'redux-devtools';
-import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
-import { Provider } from 'react-redux';
-import * as reducers from '../reducers';
-
-const finalCreateStore = compose(
-  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}>
-          {() => <TodoApp /> }
-        </Provider>
-        <DebugPanel top right bottom>
-          <DevTools store={store}
-                    monitor={LogMonitor}
-                    visibleOnLoad={true} />
-        </DebugPanel>
-      </div>
-    );
-  }
-}

examples/todomvc/containers/DevTools.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+export default createDevTools(
+  <DockMonitor toggleVisibilityKey='H'
+               changePositionKey='Q'>
+    <LogMonitor />
+  </DockMonitor>
+);

examples/todomvc/containers/Root.dev.js

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

examples/todomvc/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/todomvc/containers/Root.prod.js

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

examples/todomvc/index.js

@@ -1,8 +1,12 @@
-import React from 'react';
-import App from './containers/App';
 import 'todomvc-app-css/index.css';
+import React from 'react';
+import { render } from 'react-dom';
+import configureStore from './store/configureStore';
+import Root from './containers/Root';
 
-React.render(
+const store = configureStore();
-  <App />,
+
+render(
+  <Root store={store} />,
   document.getElementById('root')
 );

examples/todomvc/package.json

@@ -29,8 +29,9 @@
   "homepage": "https://github.com/gaearon/redux-devtools#readme",
   "dependencies": {
     "classnames": "^2.1.2",
-    "react": "^0.13.3",
+    "react": "^0.14.0",
-    "react-redux": "^3.0.0",
+    "react-dom": "^0.14.0",
+    "react-redux": "^4.0.0",
     "redux": "^3.0.0"
   },
   "devDependencies": {
@@ -39,6 +40,9 @@
     "node-libs-browser": "^0.5.2",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^1.3.0",
+    "redux-devtools": "^3.0.0-beta-2",
+    "redux-devtools-log-monitor": "^1.0.0-beta-2",
+    "redux-devtools-dock-monitor": "^1.0.0-beta-2",
     "style-loader": "^0.12.3",
     "todomvc-app-css": "^2.0.1",
     "webpack": "^1.9.11",

examples/todomvc/reducers/index.js

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

examples/todomvc/store/configureStore.dev.js

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

examples/todomvc/store/configureStore.js

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

examples/todomvc/store/configureStore.prod.js

@@ -0,0 +1,6 @@
+import { createStore } from 'redux';
+import rootReducer from '../reducers';
+
+export default function configureStore(initialState) {
+  return createStore(rootReducer, initialState);
+}