diff --git a/package.json b/package.json
index 96ac94c73..12effb7ce 100644
--- a/package.json
+++ b/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",
diff --git a/src/containers/App.js b/src/containers/App.js
index 71b5a4bf2..65ac3e0de 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -11,7 +11,9 @@ class App extends React.Component {
const { fuelSavingsAppState, actions } = this.props;
return (
+
+
);
}
}
diff --git a/src/containers/DevTools.js b/src/containers/DevTools.js
new file mode 100644
index 000000000..2d01e679d
--- /dev/null
+++ b/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(
+
+);
+
+export default DevTools;
diff --git a/src/index.js b/src/index.js
index bc956481f..d9dcbcf71 100755
--- a/src/index.js
+++ b/src/index.js
@@ -12,3 +12,8 @@ render(
, document.getElementById('app')
);
+
+if (process.env.NODE_ENV !== 'production') {
+ const showDevTools = require('./showDevTools');
+ showDevTools(store);
+}
diff --git a/src/showDevTools.js b/src/showDevTools.js
new file mode 100644
index 000000000..d69bb4566
--- /dev/null
+++ b/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('');
+ render(
+ ,
+ popup.document.getElementById('react-devtools-root')
+ );
+ }, 10);
+}
diff --git a/src/store/configureStore.dev.js b/src/store/configureStore.dev.js
new file mode 100644
index 000000000..5e53ed023
--- /dev/null
+++ b/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;
+}
diff --git a/src/store/configureStore.js b/src/store/configureStore.js
index 8d07ed66d..1d2145de5 100644
--- a/src/store/configureStore.js
+++ b/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');
}
diff --git a/src/store/configureStore.prod.js b/src/store/configureStore.prod.js
new file mode 100644
index 000000000..30b508fb3
--- /dev/null
+++ b/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);
+}
diff --git a/webpack.config.js b/webpack.config.js
index 30d7e9c53..0ad29186c 100644
--- a/webpack.config.js
+++ b/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;
};