#305: integrate with redux dev tools browser extention and remove redux-devtools

2024-12-25 06:30:00 +05:30 · 2017-09-09 21:01:02 +03:00 · 2017-09-09 21:01:02 +03:00 · f55700b4ff
commit f55700b4ff
parent 82744f9300
5 changed files with 10 additions and 186 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1513,12 +1513,6 @@
      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
      "dev": true
    },
-    "base16": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
-      "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=",
-      "dev": true
-    },
    "base64-arraybuffer": {
      "version": "0.1.5",
      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
@ -6449,21 +6443,6 @@
        "lodash._isiterateecall": "3.0.9"
      }
    },
-    "lodash.curry": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
-      "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA=",
-      "dev": true
-    },
-    "lodash.debounce": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
-      "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=",
-      "dev": true,
-      "requires": {
-        "lodash._getnative": "3.9.1"
-      }
-    },
    "lodash.defaults": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@ -6482,12 +6461,6 @@
      "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
      "dev": true
    },
-    "lodash.flow": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
-      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=",
-      "dev": true
-    },
    "lodash.foreach": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
@ -7791,12 +7764,6 @@
        "error-ex": "1.3.1"
      }
    },
-    "parse-key": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/parse-key/-/parse-key-0.2.1.tgz",
-      "integrity": "sha1-e892WVU242B1Zkvk1ofkvdkQII8=",
-      "dev": true
-    },
    "parse5": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
@ -8726,12 +8693,6 @@
      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
      "dev": true
    },
-    "pure-color": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
-      "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=",
-      "dev": true
-    },
    "q": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.0.tgz",
@ -8898,34 +8859,12 @@
      "integrity": "sha1-Bi02EX/o0Y87peBuszODsLhepbk=",
      "dev": true
    },
-    "react-base16-styling": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.5.3.tgz",
-      "integrity": "sha1-OFjyTpxN2MvT9wLz901YHKKRcmk=",
-      "dev": true,
-      "requires": {
-        "base16": "1.0.0",
-        "lodash.curry": "4.1.1",
-        "lodash.flow": "3.5.0",
-        "pure-color": "1.3.0"
-      }
-    },
    "react-deep-force-update": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz",
      "integrity": "sha1-+RG1vh0qb+OHUH3W6adnqikktMc=",
      "dev": true
    },
-    "react-dock": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/react-dock/-/react-dock-0.2.4.tgz",
-      "integrity": "sha1-5yfcdVCztzEWY13LnA4E0Lev4Xw=",
-      "dev": true,
-      "requires": {
-        "lodash.debounce": "3.1.1",
-        "prop-types": "15.5.10"
-      }
-    },
    "react-dom": {
      "version": "15.6.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz",
@ -8969,17 +8908,6 @@
        }
      }
    },
-    "react-json-tree": {
-      "version": "0.10.9",
-      "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.10.9.tgz",
-      "integrity": "sha1-cmMXOizIvwXqxjsEGcPOdbIy4oQ=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "6.25.0",
-        "prop-types": "15.5.10",
-        "react-base16-styling": "0.5.3"
-      }
-    },
    "react-motion": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.0.tgz",
@ -9000,12 +8928,6 @@
        "react-deep-force-update": "1.0.1"
      }
    },
-    "react-pure-render": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/react-pure-render/-/react-pure-render-1.0.2.tgz",
-      "integrity": "sha1-nYqSjH8sN1E8LQZOV7Pjw1bp+rs=",
-      "dev": true
-    },
    "react-redux": {
      "version": "5.0.6",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.6.tgz",
@ -9261,70 +9183,6 @@
        "symbol-observable": "1.0.4"
      }
    },
-    "redux-devtools": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/redux-devtools/-/redux-devtools-3.4.0.tgz",
-      "integrity": "sha1-m/hBUVQwH1aQbyajb1vB9cqRO7U=",
-      "dev": true,
-      "requires": {
-        "lodash": "4.17.4",
-        "prop-types": "15.5.10",
-        "redux-devtools-instrument": "1.8.2"
-      }
-    },
-    "redux-devtools-dock-monitor": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/redux-devtools-dock-monitor/-/redux-devtools-dock-monitor-1.1.2.tgz",
-      "integrity": "sha1-6yE6Ah+MJbiS9smL24c2hhXj0gE=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "6.25.0",
-        "parse-key": "0.2.1",
-        "prop-types": "15.5.10",
-        "react-dock": "0.2.4",
-        "react-pure-render": "1.0.2"
-      }
-    },
-    "redux-devtools-instrument": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/redux-devtools-instrument/-/redux-devtools-instrument-1.8.2.tgz",
-      "integrity": "sha1-XpHP5ALnkNrj/S8NI197fYSwn/4=",
-      "dev": true,
-      "requires": {
-        "lodash": "4.17.4",
-        "symbol-observable": "1.0.4"
-      }
-    },
-    "redux-devtools-log-monitor": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/redux-devtools-log-monitor/-/redux-devtools-log-monitor-1.3.0.tgz",
-      "integrity": "sha1-LeDKHXCNogi8pknsdBAwIwNszjk=",
-      "dev": true,
-      "requires": {
-        "lodash.debounce": "4.0.8",
-        "prop-types": "15.5.10",
-        "react-json-tree": "0.10.9",
-        "react-pure-render": "1.0.2",
-        "redux-devtools-themes": "1.0.0"
-      },
-      "dependencies": {
-        "lodash.debounce": {
-          "version": "4.0.8",
-          "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-          "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-          "dev": true
-        }
-      }
-    },
-    "redux-devtools-themes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redux-devtools-themes/-/redux-devtools-themes-1.0.0.tgz",
-      "integrity": "sha1-xILc48U3OXYEX0ATSQfZ3LOuPV0=",
-      "dev": true,
-      "requires": {
-        "base16": "1.0.0"
-      }
-    },
    "redux-localstorage": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/redux-localstorage/-/redux-localstorage-0.4.1.tgz",
--- a/package.json
+++ b/package.json
@ -97,9 +97,6 @@
    "react-addons-perf": "^15.3.0",
    "react-addons-test-utils": "^15.0.2",
    "react-test-renderer": "^15.5.4",
-    "redux-devtools": "^3.3.1",
-    "redux-devtools-dock-monitor": "^1.1.1",
-    "redux-devtools-log-monitor": "^1.0.11",
    "sass-loader": "^4.0.0",
    "scripts": "file:./scripts",
    "sinon": "^3.2.1",
--- a/src/containers/DevTools.js
+++ b/src/containers/DevTools.js
@ -1,24 +0,0 @@
-import React from 'react';
-
-// Exported from redux-devtools
-import { createDevTools } from 'redux-devtools';
-
-// Monitors are separate packages, and you can make a custom one
-import LogMonitor from 'redux-devtools-log-monitor';
-import DockMonitor from 'redux-devtools-dock-monitor';
-
-// createDevTools takes a monitor and produces a DevTools component
-const DevTools = createDevTools(
-    // Monitors are individually adjustable with props.
-    // Consult their repositories to learn about those props.
-    // Here, we put LogMonitor inside a DockMonitor.
-    // Note: DockMonitor is visible by default.
-    <DockMonitor toggleVisibilityKey="ctrl-h"
-        changePositionKey="ctrl-d"
-        defaultIsVisible={false}
-    >
-        <LogMonitor theme="tomorrow" />
-    </DockMonitor>
-);
-
-export default DevTools;
--- a/src/pages/root/RootPage.js
+++ b/src/pages/root/RootPage.js
@ -1,6 +1,8 @@
 // @flow
 import React, { Component } from 'react';
-
+import { connect } from 'react-redux';
+import { resetAuth } from 'components/auth/actions';
+import { withRouter } from 'react-router';
 import { FormattedMessage as Message } from 'react-intl';
 import { Route, Link, Switch } from 'react-router-dom';
 import Helmet from 'react-helmet';
@ -22,14 +24,6 @@ import type { User } from 'components/user';
 import styles from './root.scss';
 import messages from './RootPage.intl.json';

-/* global process: false */
-let DevTools;
-if (process.env.NODE_ENV === 'production') {
-    DevTools = () => null;
-} else {
-    DevTools = require('containers/DevTools').default;
-}
-
 class RootPage extends Component<{
    user: User,
    isPopupActive: bool,
@ -92,16 +86,11 @@ class RootPage extends Component<{
                    </div>
                </div>
                <PopupStack />
-                <DevTools />
            </div>
        );
    }
 }

-import { connect } from 'react-redux';
-import { resetAuth } from 'components/auth/actions';
-import { withRouter } from 'react-router';
-
 export default withRouter(connect((state) => ({
    user: state.user,
    isPopupActive: state.popup.popups.length > 0
--- a/src/storeFactory.js
+++ b/src/storeFactory.js
@ -1,3 +1,4 @@
+// @flow
 import { createStore, applyMiddleware, compose } from 'redux';
 // midleware, который позволяет возвращать из экшенов функции
 // это полезно для работы с асинхронными действиями,
@ -22,14 +23,17 @@ export default function storeFactory() {
    if (process.env.NODE_ENV === 'production') {
        enhancer = compose(middlewares, persistStateEnhancer);
    } else {
-        const DevTools = require('containers/DevTools').default;
-        enhancer = compose(middlewares, persistStateEnhancer, DevTools.instrument());
+        const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+        enhancer = composeEnhancers(
+            middlewares,
+            persistStateEnhancer
+        );
    }

    const store = createStore(reducers, {}, enhancer);

    // Hot reload reducers
-    if (module.hot) {
+    if (module.hot && typeof module.hot.accept === 'function') {
        module.hot.accept('reducers', () =>
            store.replaceReducer(require('reducers').default)
        );