Add redux-devtools

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-slingshot",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Starter kit for creating apps with React and Redux",
   "scripts": {
     "prestart": "npm run remove-dist",
@@ -20,6 +20,9 @@
     "test:watch": "npm run test -- --watch"
   },
   "author": "Cory House",
+  "contributors": [
+    "Barry Staes (http://barrystaes.nl/)"
+  ],
   "license": "MIT",
   "dependencies": {
     "object-assign": "4.0.1",
@@ -50,6 +53,8 @@
     "react-transform-catch-errors": "1.0.0",
     "react-transform-hmr": "1.0.1",
     "redbox-react": "1.2.0",
+    "redux-devtools": "3.0.1",
+    "redux-devtools-log-monitor": "1.0.2",
     "rimraf": "2.5.0",
     "sass-loader": "3.1.2",
     "style-loader": "0.12.3",

src/containers/App.js

@@ -11,7 +11,9 @@ class App extends React.Component {
     const { fuelSavingsAppState, actions } = this.props;
 
     return (
+      <div>
         <FuelSavingsApp fuelSavingsAppState={fuelSavingsAppState} actions={actions} />
+      </div>
     );
   }
 }

src/containers/DevTools.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+
+const DevTools = createDevTools(
+  <LogMonitor theme="solarized" />
+);
+
+export default DevTools;

src/index.js

@@ -12,3 +12,8 @@ render(
     <App />
   </Provider>, document.getElementById('app')
 );
+
+if (process.env.NODE_ENV !== 'production') {
+  const showDevTools = require('./showDevTools');
+  showDevTools(store);
+}

src/showDevTools.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from 'react-dom';
+import DevTools from './containers/DevTools';
+
+export default function showDevTools(store) {
+  const popup = window.open(null, 'Redux DevTools', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no');
+  // Reload in case it already exists
+  popup.location.reload();
+
+  setTimeout(() => {
+    popup.document.write('<div id="react-devtools-root"></div>');
+    render(
+      <DevTools store={store} />,
+      popup.document.getElementById('react-devtools-root')
+    );
+  }, 10);
+}

src/store/configureStore.dev.js

@@ -0,0 +1,30 @@
+//Remember to keep the production/development version of this file in sync.
+//This boilerplate file is likely to be the same for each project that uses Redux.
+//With Redux, the actual stores are in /reducers.
+
+import { createStore, compose } from 'redux';
+import rootReducer from '../reducers';
+import DevTools from '../containers/DevTools';
+
+const finalCreateStore = compose(
+  // Middleware you want to use in development:
+  //applyMiddleware(d1, d2, d3),
+  // Required! Enable Redux DevTools with the monitors you chose
+  DevTools.instrument()
+)(createStore);
+
+export default function configureStore(initialState) {
+  // Add middleware
+  const store = finalCreateStore(rootReducer, initialState);
+
+  // Configure the store for hot reloading
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextReducer = require('../reducers');
+      store.replaceReducer(nextReducer);
+    });
+  }
+
+  return store;
+}

src/store/configureStore.js

@@ -1,20 +1,7 @@
-//This file merely configures the store for hot reloading.
-//This boilerplate file is likely to be the same for each project that uses Redux.
-//With Redux, the actual stores are in /reducers.
-
-import { createStore } from 'redux';
-import rootReducer from '../reducers';
-
-export default function configureStore(initialState) {
-  const store = createStore(rootReducer, initialState);
-
-  if (module.hot) {
-    // Enable Webpack hot module replacement for reducers
-    module.hot.accept('../reducers', () => {
-      const nextReducer = require('../reducers');
-      store.replaceReducer(nextReducer);
-    });
-  }
-
-  return store;
+// Use DefinePlugin (Webpack) or loose-envify (Browserify)
+// together with Uglify to strip the dev branch in prod build.
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./configureStore.prod');
+} else {
+  module.exports = require('./configureStore.dev');
 }

src/store/configureStore.prod.js

@@ -0,0 +1,17 @@
+//Remember to keep the production/development version of this file in sync.
+//This boilerplate file is likely to be the same for each project that uses Redux.
+//With Redux, the actual stores are in /reducers.
+
+import { createStore, compose } from 'redux';
+import rootReducer from '../reducers';
+
+const finalCreateStore = compose(
+  // Middleware you want to use in production:
+  //applyMiddleware(d1, d2, d3),
+  // Other store enhancers if you use any
+)(createStore);
+
+export default function configureStore(initialState) {
+  // Add middleware
+  return finalCreateStore(rootReducer, initialState);
+}

webpack.config.js

@@ -26,6 +26,9 @@ var getPlugins = function(env) {
       break;
   }
 
+  // This allows DevTools component to be included
+  plugins.push(new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify(env)}));
+
   return plugins;
 };