leave devTools in favor of redux devtools extension

Author: MacKentoch

README.md

@@ -14,16 +14,16 @@ Full ES2015+ React + React-Router + Redux + Bootstrap with Hot Reload and redux-
 
 *Concept behind:* same as [react-bootstrap-webpack-starter](https://github.com/MacKentoch/react-bootstrap-webpack-starter) **but added `Redux` and amazing and helpful `redux-devtools`.**
 
-## Breaking changes since v0.5.0
-ReactJS v15.4.x required react-hot-loader to be v3+ (*previous react-hot-loader was v1.x and v1.3.1 came too late*). So This starter had to include breaking changes to follow all of that.
+## Breaking changes since v2.0.0
+redux-devtools is now replaced by [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension).
 
 ## Detailed Content
 
 **Front:**
 - React JS (15.x - [github :link:](https://github.com/facebook/react))
 - Redux (*as you application grows managing state will be a serious concern, save pain with Redux*)
 - React-Redux (*Redux is not specific to ReactJS, you could easily use it with Angular2 for instance*)
-- Redux-devtools (*want to time travel your application State?*)
+- redux-devtools-extension ([github :link:](https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension))
 - React-Router-Redux (*previously named react-simple-router*)
 - react-router (2.x- [github :link:](https://github.com/reactjs/react-router))
 - Bootstrap (3.x - [github :link:](https://github.com/twbs/bootstrap))
@@ -77,9 +77,6 @@ npm run dev
 npm run dev-win
 ```
 
-##### Note : redux-devtools shortcuts
-- `ctrl+h`: to toggle devtools panel
-- `ctrl+q`: to change devtools panel position (*by default: on the right*)
 
 ### dev : hot reload mode (*+ redux-devtools*)
 
@@ -94,10 +91,6 @@ npm run start
 npm run start-win
 ```
 
-##### Note : redux-devtools shortcuts
-- `ctrl+h`: to toggle devtools panel
-- `ctrl+q`: to change devtools panel position (*by default: on the right*)
-
 ### tests
 
 *General case:*

docs/public/assets/bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-bootstrap-webpack-starter",
-  "version": "0.6.1",
+  "version": "2.0.0",
   "description": "react js + redux + react router + hot reload + devTools + bootstrap + webpack starter",
   "main": "src/index.js",
   "scripts": {
@@ -24,7 +24,7 @@
     "starter",
     "webpack",
     "hot-reload",
-    "redux-devtools",
+    "redux-devtools-extension",
     "devtools"
   ],
   "repository": {
@@ -65,9 +65,6 @@
     "postcss-loader": "^1.1.1",
     "precss": "^1.4.0",
     "react-addons-test-utils": "^15.4.1",
-    "redux-devtools": "^3.3.1",
-    "redux-devtools-dock-monitor": "^1.1.1",
-    "redux-devtools-log-monitor": "^1.1.1",
     "redux-logger": "^2.7.4",
     "redux-mock-store": "^1.2.1",
     "sass-loader": "^4.0.2",

package.json

@@ -11,7 +11,6 @@ import {
 import { Provider }             from 'react-redux';
 import { syncHistoryWithStore } from 'react-router-redux';
 import configureStore           from './redux/store/configureStore';
-import DevTools                 from './redux/devTools/DevTools.jsx';
 
 const store         = configureStore();
 const syncedHistory = syncHistoryWithStore(browserHistory, store);
@@ -26,7 +25,6 @@ class Root extends Component {
           <Router history={syncedHistory}>
             {routes()}
           </Router>
-          { process.env.NODE_ENV !== 'production' ? <DevTools /> : null }
         </div>
       </Provider>
     );

src/app/Root.js

@@ -1,28 +1,26 @@
 import { createStore, compose, applyMiddleware } from 'redux';
-import { persistState }         from 'redux-devtools';
-// import { routerReducer }        from 'react-router-redux';
 import createLogger             from 'redux-logger';
 import thunkMiddleware          from 'redux-thunk';
 import reducer                  from '../modules/reducers';
-import DevTools                 from '../devTools/DevTools.jsx';
-
 
 const loggerMiddleware = createLogger({
   level     : 'info',
   collapsed : true
 });
 
 // createStore : enhancer
-const enhancer = compose(
-  applyMiddleware(thunkMiddleware, loggerMiddleware), // logger after thunk to avoid undefined actions
-  persistState(getDebugSessionKey()),
-  DevTools.instrument()
-);
+// NOTE: if redux devtools extension is not installed, we just keep using Redux compose
+const composeEnhancers =  typeof window === 'object' &&  // for universal ("isomorphic") apps
+                          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+                          ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                            // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+                            // see: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md
+                          })
+                          : compose;
 
-function getDebugSessionKey() {
-  const matches = window.location.href.match(/[?&]debug_session=([^&]+)\b/);
-  return (matches && matches.length > 0)? matches[1] : null;
-}
+const enhancer = composeEnhancers(
+  applyMiddleware(thunkMiddleware, loggerMiddleware) // logger after thunk to avoid undefined actions
+);
 
 export default function configureStore(initialState) {
   const store = createStore(reducer, initialState, enhancer);
@@ -31,6 +29,5 @@ export default function configureStore(initialState) {
       store.replaceReducer(require('../modules/reducers').default)
     );
   }
-
   return store;
 }

src/app/redux/devTools/DevTools.jsx

@@ -3,18 +3,21 @@ import {
   applyMiddleware,
   compose
 }                         from 'redux';
-import createLogger       from 'redux-logger';
 import thunkMiddleware    from 'redux-thunk';
 import reducer            from '../modules/reducers';
 
-const loggerMiddleware = createLogger({
-  level     : 'info',
-  collapsed : true
-});
-
 // createStore : enhancer
-const enhancer = compose(
-  applyMiddleware(thunkMiddleware, loggerMiddleware) // logger after thunk to avoid undefined actions
+// NOTE: if redux devtools extension is not installed, we just keep using Redux compose
+const composeEnhancers =  typeof window === 'object' &&  // for universal ("isomorphic") apps
+                          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+                          ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+                            // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+                            // see: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md
+                          })
+                          : compose;
+
+const enhancer = composeEnhancers(
+  applyMiddleware(thunkMiddleware) // logger after thunk to avoid undefined actions
 );
 
 export default function configureStore(initialState) {