add redux-devtools

app/app.css

@@ -5,6 +5,7 @@ body {
   background-color: #232C39;
   background-image: linear-gradient(45deg, rgba(0, 216, 255, .5) 10%, rgba(0, 1, 127, .7));
   font-family: Arial, Helvetica, Helvetica Neue;
+  overflow-y: hidden;
 }
 
 h2 {

app/components/Home.module.css

@@ -1,8 +1,8 @@
 .container {
   position: absolute;
-  text-align: right;
   top: 30%;
-  right: 10px;
+  left: 10px;
+  text-align: center;
 }
 
 .container h2 {

app/containers/App.development.js

@@ -0,0 +1,19 @@
+import React, { Component, PropTypes} from 'react';
+import DevTools from './DevTools';
+
+
+export default class App extends Component {
+  static propTypes = {
+    children: PropTypes.element.isRequired
+  };
+
+  render() {
+    return (
+      <div>
+        {this.props.children}
+        <DevTools />
+      </div>
+    );
+  }
+}
+

app/containers/App.js

@@ -1,17 +1,5 @@
-import React, { Component, PropTypes} from 'react';
-
-
-export default class App extends Component {
-  static propTypes = {
-    children: PropTypes.element.isRequired
-  };
-
-  render() {
-    return (
-      <div>
-        {this.props.children}
-      </div>
-    );
-  }
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./App.production');
+} else {
+  module.exports = require('./App.development');
 }
-

app/containers/App.production.js

@@ -0,0 +1,16 @@
+import React, { Component, PropTypes} from 'react';
+
+export default class App extends Component {
+  static propTypes = {
+    children: PropTypes.element.isRequired
+  };
+
+  render() {
+    return (
+      <div>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+

app/containers/DevTools.js

@@ -0,0 +1,13 @@
+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>
+);

app/store/configureStore.development.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;
+}

app/store/configureStore.js

@@ -1,21 +1,5 @@
-import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-import reducer from '../reducers';
-
-const createStoreWithMiddleware = applyMiddleware(
-  thunk
-)(createStore);
-
-export default function configureStore(initialState) {
-  const store = createStoreWithMiddleware(reducer, initialState);
-
-  if (module.hot) {
-    // Enable Webpack hot module replacement for reducers
-    module.hot.accept('../reducers', () => {
-      const nextReducer = require('../reducers');
-      store.replaceReducer(nextReducer);
-    });
-  }
-
-  return store;
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./configureStore.production');
+} else {
+  module.exports = require('./configureStore.development');
 }

app/store/configureStore.production.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);
+}

package.json

@@ -65,12 +65,16 @@
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.1.1",
-    "sinon": "^1.16.1",
+    "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",
+    "redux-logger": "^2.0.4",
+    "sinon": "^1.17.2",
     "style-loader": "^0.13.0",
     "webpack": "^1.12.1",
     "webpack-dev-middleware": "^1.2.0",
     "webpack-hot-middleware": "^2.4.1",
-    "webpack-target-electron-renderer": "^0.1.0"
+    "webpack-target-electron-renderer": "^0.1.1"
   },
   "dependencies": {
     "electron-debug": "^0.3.0",
@@ -80,8 +84,6 @@
     "react-redux": "^4.0.0",
     "react-router": "^1.0.0-rc4",
     "redux": "^3.0.4",
-    "redux-devtools": "^3.0.0-beta-3",
-    "redux-logger": "^2.0.4",
     "redux-promise": "^0.5.0",
     "redux-thunk": "^1.0.0"
   }