Merge pull request #548 from firstred/devtools

feat: add React + Redux dev tools

Author: Crecket

package.json

@@ -189,6 +189,7 @@
         "dotenv": "^6.1.0",
         "electron": "4.2.2",
         "electron-builder": "^20.38.5",
+        "electron-devtools-installer": "^2.2.4",
         "electron-reload": "^1.4.0",
         "email-validator": "^1.1.1",
         "enzyme": "^3.3.0",
@@ -237,7 +238,6 @@
         "react-windowed-list": "^2.0.0",
         "redux": "^3.7.2",
         "redux-form": "^7.4.2",
-        "redux-logger": "^3.0.6",
         "redux-mock-store": "^1.5.1",
         "redux-thunk": "^2.2.0",
         "rollup": "^0.45.2",

src/background.js

@@ -17,6 +17,7 @@ import registerTouchBar from "./helpers/touchbar";
 import setupTrayIcon from "./helpers/tray";
 import settingsHelper from "./helpers/settings";
 import oauth from "./helpers/oauth";
+import devTools from "./helpers/devtools";
 import env from "./env";
 
 // disable security warnings since we need cross-origin requests
@@ -126,7 +127,11 @@ app.on("ready", () => {
         mainWindow.focus();
 
         if (env.name === "development") {
-            mainWindow.openDevTools();
+            // Add React dev tools
+            devTools()
+              .catch(console.error)
+              .then(() => mainWindow.openDevTools())
+            ;
         }
     });
 

src/helpers/devtools.js

@@ -0,0 +1,8 @@
+import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from "electron-devtools-installer";
+
+export default async () => {
+  await Promise.all([
+    installExtension(REACT_DEVELOPER_TOOLS),
+    installExtension(REDUX_DEVTOOLS),
+  ]);
+};

src/react/Store.jsx

@@ -1,26 +1,19 @@
-import { applyMiddleware, createStore } from "redux";
-import { createLogger } from "redux-logger";
+import { applyMiddleware, createStore, compose } from "redux";
 import thunk from "redux-thunk";
 // fetch all reducers as a bundle
 import reducer from "./Reducers/index.js";
 
 // create the middleware for this store
 let middleware;
 if (process.env.DEVELOPMENT === true) {
-    // create middleware with logger
-    middleware = applyMiddleware(
-        thunk,
-        createLogger({
-            collapsed: true,
-            timestamp: false
-        })
-    );
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+  middleware = composeEnhancers(applyMiddleware(thunk));
 } else {
-    // default middleware
-    middleware = applyMiddleware(thunk);
+  // default middleware
+  middleware = compose(applyMiddleware(thunk));
 }
 
 //return the store
 export default (initialValues = {}) => {
-    return createStore(reducer, initialValues, middleware);
+  return createStore(reducer, initialValues, middleware);
 };