add redux-devtools-extension to get rid of boilerplate types and… (#35)

add redux-devtools-extension to get rid of boilerplate types and any

Author: Can-Sahin

app/configureStore.ts

@@ -2,52 +2,45 @@
  * Create the store with dynamic reducers
  */
 
-import { applyMiddleware, compose, createStore } from 'redux';
+import { applyMiddleware, createStore } from 'redux';
 import { routerMiddleware } from 'connected-react-router';
 import createSagaMiddleware from 'redux-saga';
 import createReducer from './reducers';
 import { InjectedStore } from 'types';
 import { History } from 'history';
 import { RootState } from './containers/App/types';
-
-declare interface IWindow extends Window {
-  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any; // redux-dev-tools definitions not needed
-}
-
-declare const window: IWindow;
+import { composeWithDevTools } from 'redux-devtools-extension';
 
 export default function configureStore(initialState: RootState | {} = {}, history: History) {
-  let composeEnhancers = compose;
   const reduxSagaMonitorOptions = {};
+  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
+
+  const middlewares = [sagaMiddleware, routerMiddleware(history)];
+
+  let enhancer = applyMiddleware(...middlewares);
 
   // If Redux Dev Tools and Saga Dev Tools Extensions are installed, enable them
   /* istanbul ignore next */
   if (process.env.NODE_ENV !== 'production' && typeof window === 'object') {
-    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
-      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
-    }
-
-    // NOTE: Uncomment the code below to restore support for Redux Saga
-    // Dev Tools once it supports redux-saga version 1.x.x
-    // if (window.__SAGA_MONITOR_EXTENSION__)
-    //   reduxSagaMonitorOptions = {
-    //     sagaMonitor: window.__SAGA_MONITOR_EXTENSION__,
-    //   };
+    enhancer = composeWithDevTools(enhancer)
   }
 
-  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
+  // NOTE: Uncomment the code below to restore support for Redux Saga
+  // Dev Tools once it supports redux-saga version 1.x.x
+  // if (window.__SAGA_MONITOR_EXTENSION__)
+  //   reduxSagaMonitorOptions = {
+  //     sagaMonitor: window.__SAGA_MONITOR_EXTENSION__,
+  //   };
+
 
   // Create the store with two middlewares
   // 1. sagaMiddleware: Makes redux-sagas work
   // 2. routerMiddleware: Syncs the location/URL path to the state
-  const middlewares = [sagaMiddleware, routerMiddleware(history)];
-
-  const enhancers = [applyMiddleware(...middlewares)];
 
   const store = createStore(
     createReducer(),
     initialState,
-    composeEnhancers(...enhancers),
+    enhancer,
   ) as InjectedStore;
 
   // Extensions
@@ -65,3 +58,4 @@ export default function configureStore(initialState: RootState | {} = {}, histor
 
   return store;
 }
+

app/tests/store.test.ts

@@ -2,9 +2,9 @@
  * Test store addons
  */
 import history from '../utils/history';
-
 import configureStore from '../configureStore';
 import { InjectedStore } from '../types';
+import { composeWithDevTools } from 'redux-devtools-extension';
 
 describe('configureStore', () => {
   let store: InjectedStore;
@@ -32,11 +32,14 @@ describe('configureStore', () => {
   });
 });
 
+
+jest.mock('redux-devtools-extension', () => ({
+  composeWithDevTools: jest.fn(),
+}));
+
 describe('configureStore params', () => {
-  it('should call window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__', () => {
-    const compose = jest.fn();
-    (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = () => compose;
+  it('should call composeWithDevTools', () => {
     configureStore(undefined, history);
-    expect(compose).toHaveBeenCalled();
+    expect(composeWithDevTools).toHaveBeenCalled();
   });
 });

internals/templates/configureStore.ts

@@ -2,7 +2,8 @@
  * Create the store with dynamic reducers
  */
 
-import { applyMiddleware, compose, createStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import { applyMiddleware, createStore } from 'redux';
 import { routerMiddleware } from 'connected-react-router';
 import createSagaMiddleware from 'redux-saga';
 import createReducer from './reducers';
@@ -11,20 +12,18 @@ import { History } from 'history';
 import { RootState } from '../../app/containers/App/types';
 
 
-declare interface IWindow extends Window {
-  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any; // redux-dev-tools definitions not needed
-}
-declare const window: IWindow;
-
 export default function configureStore(initialState: RootState | {} = {}, history: History) {
-  let composeEnhancers = compose;
   const reduxSagaMonitorOptions = {};
+  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
+
+  const middlewares = [sagaMiddleware, routerMiddleware(history)];
+
+  let enhancer = applyMiddleware(...middlewares);
 
   // If Redux Dev Tools and Saga Dev Tools Extensions are installed, enable them
   /* istanbul ignore next */
   if (process.env.NODE_ENV !== 'production' && typeof window === 'object') {
-    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
-      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
+    enhancer = composeWithDevTools(enhancer)
     }
 
     // NOTE: Uncomment the code below to restore support for Redux Saga
@@ -33,21 +32,20 @@ export default function configureStore(initialState: RootState | {} = {}, histor
     //   reduxSagaMonitorOptions = {
     //     sagaMonitor: window.__SAGA_MONITOR_EXTENSION__,
     //   };
-  }
 
-  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
+
+
 
   // Create the store with two middlewares
   // 1. sagaMiddleware: Makes redux-sagas work
   // 2. routerMiddleware: Syncs the location/URL path to the state
-  const middlewares = [sagaMiddleware, routerMiddleware(history)];
 
-  const enhancers = [applyMiddleware(...middlewares)];
+
 
   const store = createStore(
     createReducer(),
     initialState,
-    composeEnhancers(...enhancers),
+    enhancer,
   ) as InjectedStore;
 
   // Extensions

internals/templates/tests/store.test.ts

@@ -2,10 +2,10 @@
  * Test store addons
  */
 
-// import { BrowserRouter } from 'react-router-dom';
 import configureStore from '../configureStore';
 import history from '../utils/history';
 import { InjectedStore } from '../../../app/types';
+import { composeWithDevTools } from 'redux-devtools-extension';
 
 describe('configureStore', () => {
   let store: InjectedStore;
@@ -33,11 +33,13 @@ describe('configureStore', () => {
   });
 });
 
+jest.mock('redux-devtools-extension', () => ({
+  composeWithDevTools: jest.fn(),
+}));
+
 describe('configureStore params', () => {
-  it('should call window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__', () => {
-    const compose = jest.fn();
-    (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = () => compose;
+  it('should call composeWithDevTools', () => {
     configureStore(undefined, history);
-    expect(compose).toHaveBeenCalled();
+    expect(composeWithDevTools).toHaveBeenCalled();
   });
 });

package.json

@@ -71,9 +71,6 @@
     "babel-core": "7.0.0-bridge.0"
   },
   "dependencies": {
-    "@types/history": "^4.7.3",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/react-test-renderer": "^16.9.0",
     "chalk": "2.4.2",
     "compression": "1.7.4",
     "connected-react-router": "6.5.0",
@@ -101,6 +98,10 @@
     "typesafe-actions": "4.4.0"
   },
   "devDependencies": {
+    "redux-devtools-extension": "^2.13.8",
+    "@types/history": "^4.7.3",
+    "@types/react-router-dom": "^5.1.0",
+    "@types/react-test-renderer": "^16.9.0",
     "@babel/cli": "7.5.0",
     "@babel/core": "7.5.4",
     "@babel/plugin-proposal-class-properties": "7.5.0",