Merge pull request #927 from rackt/real-world-14

Update real-world example to React 0.14 and Redux DevTools Beta 3

Author: gaearon

examples/real-world/components/Explore.js

@@ -50,6 +50,9 @@ export default class Explore extends Component {
         <p>
           Code on <a href={GITHUB_REPO} target="_blank">Github</a>.
         </p>
+        <p>
+          Move the DevTools with Ctrl+W or hide them with Ctrl+H.
+        </p>
       </div>
     );
   }

examples/real-world/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="W">
+    <LogMonitor />
+  </DockMonitor>
+);

examples/real-world/containers/Root.dev.js

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { ReduxRouter } from 'redux-router';
+import DevTools from './DevTools';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <Provider store={store}>
+        <div>
+          <ReduxRouter />
+          <DevTools />
+        </div>
+      </Provider>
+    );
+  }
+}
+
+Root.propTypes = {
+  store: PropTypes.object.isRequired
+};

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

@@ -0,0 +1,18 @@
+import React, { Component, PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { ReduxRouter } from 'redux-router';
+
+export default class Root extends Component {
+  render() {
+    const { store } = this.props;
+    return (
+      <Provider store={store}>
+        <ReduxRouter />
+      </Provider>
+    );
+  }
+}
+
+Root.propTypes = {
+  store: PropTypes.object.isRequired
+};

examples/real-world/createDevToolsWindow.js

@@ -1,23 +1,12 @@
 import 'babel-core/polyfill';
 import React from 'react';
 import { render } from 'react-dom';
-import { Provider } from 'react-redux';
-import { ReduxRouter } from 'redux-router';
+import Root from './containers/Root';
 import configureStore from './store/configureStore';
 
 const store = configureStore();
 
 render(
-  <Provider store={store}>
-    <ReduxRouter />
-  </Provider>,
+  <Root store={store} />,
   document.getElementById('root')
 );
-
-if (process.env.NODE_ENV !== 'production') {
-  // Use require because imports can't be conditional.
-  // In production, you should ensure process.env.NODE_ENV
-  // is envified so that Uglify can eliminate this
-  // module and its dependencies as dead code.
-  require('./createDevToolsWindow')(store);
-}

examples/real-world/index.js

@@ -20,8 +20,8 @@
     "isomorphic-fetch": "^2.1.1",
     "lodash": "^3.10.1",
     "normalizr": "^1.0.0",
-    "react": "^0.14.0-rc1",
-    "react-dom": "^0.14.0-rc1",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0",
     "react-redux": "^2.1.2",
     "react-router": "^1.0.0-rc1",
     "redux": "^3.0.0",
@@ -32,11 +32,13 @@
   "devDependencies": {
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
-    "redux-devtools": "^2.1.5",
     "babel-plugin-react-transform": "^1.1.0",
     "concurrently": "^0.1.1",
     "express": "^4.13.3",
     "react-transform-hmr": "^1.0.0",
+    "redux-devtools": "^3.0.0-beta-3",
+    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
+    "redux-devtools-log-monitor": "^1.0.0-beta-3",
     "webpack": "^1.9.11",
     "webpack-dev-middleware": "^1.2.0",
     "webpack-hot-middleware": "^2.2.0"

examples/real-world/package.json

@@ -0,0 +1,30 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import { reduxReactRouter } from 'redux-router';
+import DevTools from '../containers/DevTools';
+import createHistory from 'history/lib/createBrowserHistory';
+import routes from '../routes';
+import thunk from 'redux-thunk';
+import api from '../middleware/api';
+import createLogger from 'redux-logger';
+import rootReducer from '../reducers';
+
+const finalCreateStore = compose(
+  applyMiddleware(thunk, api),
+  reduxReactRouter({ routes, createHistory }),
+  applyMiddleware(createLogger()),
+  DevTools.instrument()
+)(createStore);
+
+export default function configureStore(initialState) {
+  const store = finalCreateStore(rootReducer, initialState);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextRootReducer = require('../reducers');
+      store.replaceReducer(nextRootReducer);
+    });
+  }
+
+  return store;
+}

examples/real-world/store/configureStore.dev.js

@@ -1,30 +1,5 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import { reduxReactRouter } from 'redux-router';
-import { devTools } from 'redux-devtools';
-import createHistory from 'history/lib/createBrowserHistory';
-import routes from '../routes';
-import thunk from 'redux-thunk';
-import api from '../middleware/api';
-import createLogger from 'redux-logger';
-import rootReducer from '../reducers';
-
-const finalCreateStore = compose(
-  applyMiddleware(thunk, api),
-  reduxReactRouter({ routes, createHistory }),
-  applyMiddleware(createLogger()),
-  devTools()
-)(createStore);
-
-export default function configureStore(initialState) {
-  const store = finalCreateStore(rootReducer, initialState);
-
-  if (module.hot) {
-    // Enable Webpack hot module replacement for reducers
-    module.hot.accept('../reducers', () => {
-      const nextRootReducer = require('../reducers');
-      store.replaceReducer(nextRootReducer);
-    });
-  }
-
-  return store;
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./configureStore.prod');
+} else {
+  module.exports = require('./configureStore.dev');
 }