Merge pull request #132 from gaearon/next

New API

examples/counter/README.md

@@ -1,14 +1,30 @@
 # Redux DevTools Counter example
 
-## Running example
+## Running Example
+
+First, clone the project:
 
 ```
 git clone https://github.com/gaearon/redux-devtools.git
+```
+
+Then install the dependencies in the root folder:
+
+```
 cd redux-devtools
 npm install
+```
 
+Install the dependencies in the example folder:
+
+```
 cd examples/counter
 npm install
+```
+
+Finally, run the project:
+
+```
 npm start
 open http://localhost:3000
 ```

examples/counter/package.json

@@ -16,8 +16,9 @@
   },
   "homepage": "https://github.com/gaearon/redux-devtools#readme",
   "dependencies": {
-    "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",
     "redux-thunk": "^1.0.0"
   },
@@ -26,6 +27,9 @@
     "babel-loader": "^5.1.4",
     "node-libs-browser": "^0.5.2",
     "react-hot-loader": "^1.3.0",
+    "redux-devtools": "^3.0.0",
+    "redux-devtools-log-monitor": "^1.0.1",
+    "redux-devtools-dock-monitor": "^1.0.1",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

examples/counter/src/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='ctrl-h'
+               changePositionKey='ctrl-q'>
+    <LogMonitor />
+  </DockMonitor>
+);

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

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

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,14 @@
+import React, { Component } from 'react';
+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,27 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { persistState } from 'redux-devtools';
+import thunk from 'redux-thunk';
+import rootReducer from '../reducers';
+import DevTools from '../containers/DevTools';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk),
+  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/counter/src/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/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, initialState);
+}

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'],

examples/todomvc/README.md

@@ -1,7 +1,30 @@
-# Redux DevTools TodoMVC example
+# Redux DevTools Counter example
 
-## Getting Started
+## Running Example
 
-1. Install dependencies in the root folder: `cd ../..` and `npm i`
-2. Install dependencies in the example folder: `cd examples/todomvc` and `npm i`
-3. Start the development server: `npm start`
+First, clone the project:
+
+```
+git clone https://github.com/gaearon/redux-devtools.git
+```
+
+Then install the dependencies in the root folder:
+
+```
+cd redux-devtools
+npm install
+```
+
+Install the dependencies in the example folder:
+
+```
+cd examples/todomvc
+npm install
+```
+
+Finally, run the project:
+
+```
+npm start
+open http://localhost:3000
+```

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='ctrl-h'
+               changePositionKey='ctrl-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';
+
+const store = configureStore();
 
-React.render(
-  <App />,
+render(
+  <Root store={store} />,
   document.getElementById('root')
 );