add redux dev tools

Author: catarak

.env

@@ -1,3 +1,4 @@
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
-SESSION_SECRET=dyR;Ihp9Y/<i=m9&FUBwV\)$";;G:5a-_G4>W@?r~k$JR$nw74=#_Cus[z{yBj`Mq:I8LpWE~g{;B,}t\p/`Wjevkb!$n}N];u`Om57NF^GK@z5qF{0L04)Mz6{Djk
+SESSION_SECRET=dyR;Ihp9Y/<i=m9&FUBwV\)$";;G:5a-_G4>W@?r~k$JR$nw74=#_Cus[z{yBj`Mq:I8LpWE~g{;B,}t\p/`Wjevkb!$n}N];u`Om57NF^GK@z5qF{0L04)Mz6{Djk
+NODE_ENV=development

client/modules/App/App.jsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import DevTools from './components/DevTools';
 
 class App extends React.Component {
   constructor(props, context) {
     super(props, context);
+    this.state = {isMounted: false};
+  }
+
+  componentDidMount() {
+    this.setState({isMounted: true});
   }
 
   render() {
+    debugger;
     return (
       <div className="app">
+        {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
         { this.props.children }
       </div>
     );

client/modules/App/components/DevTools.jsx

@@ -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="ctrl-h"
+    changePositionKey="ctrl-w"
+  >
+    <LogMonitor />
+  </DockMonitor>
+);

client/store.js

@@ -1,12 +1,23 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import thunk from 'redux-thunk'
+import DevTools from './modules/App/components/DevTools'
 import rootReducer from './reducers'
 
 export default function configureStore(initialState) {
+
+  const enhancers = [
+    applyMiddleware(thunk),
+  ];
+
+  if (process.env.CLIENT && process.env.NODE_ENV === 'development') {
+    // Enable DevTools only when rendering on client and during development.
+    enhancers.push(window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument());
+  }
+
   const store = createStore(
     rootReducer,
     initialState,
-    applyMiddleware(thunk)
+    compose(...enhancers)
   )
 
   if (module.hot) {

package.json

@@ -23,6 +23,9 @@
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.5",
     "node-sass": "^3.7.0",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.11",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.0",

webpack.config.js

@@ -14,7 +14,13 @@ module.exports = {
     extensions: ['', '.js', '.jsx'],
   },
 	plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        CLIENT: JSON.stringify(true),
+        'NODE_ENV': JSON.stringify('development'),
+      }
+    })
   ],
   module: {
     loaders: [