Fix examples

Author: gaearon

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

@@ -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/DevTools.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.dev.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.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/containers/Root.prod.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';
+
+const store = configureStore();
 
-React.render(
-  <App />,
+render(
+  <Root store={store} />,
   document.getElementById('root')
 );

examples/todomvc/index.js

@@ -29,8 +29,9 @@
   "homepage": "https://github.com/gaearon/redux-devtools#readme",
   "dependencies": {
     "classnames": "^2.1.2",
-    "react": "^0.13.3",
-    "react-redux": "^3.0.0",
+    "react": "^0.14.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",