Implement Monitor class

Related to #145.
zalmoxisus · Jul 15, 2016 · d7089e4 · d7089e4
1 parent 9254258
commit d7089e4
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 44 deletions.
diff --git a/src/app/service/Monitor.js b/src/app/service/Monitor.js
@@ -0,0 +1,40 @@
+const monitorActions = [
+  'TOGGLE_ACTION', 'SWEEP', 'SET_ACTIONS_ACTIVE', 'IMPORT_STATE'
+];
+
+export default class Monitor {
+  constructor(update) {
+    this.update = update;
+  }
+  reducer = (state = {}, action) => {
+    if (!this.active) return state;
+    this.lastAction = action.type;
+    if (this.isHotReloaded()) {
+      // Send new lifted state on hot-reloading
+      setTimeout(this.update, 0);
+    }
+    return state;
+  };
+  start = () => {
+    this.active = true;
+    this.update();
+  };
+  stop = () => {
+    this.active = false;
+    clearTimeout(this.waitingTimeout);
+  };
+  isWaiting = () => {
+    const currentTime = Date.now();
+    if (this.lastTime && currentTime - this.lastTime < 200) {
+      // no more frequently than once in 200ms
+      this.stop();
+      this.waitingTimeout = setTimeout(this.start, 1000);
+      return true;
+    }
+    this.lastTime = currentTime;
+    return false;
+  };
+  isHotReloaded = () => this.lastAction === '@@redux/INIT';
+  isMonitorAction = () => monitorActions.indexOf(this.lastAction) !== -1;
+  isTimeTraveling = () => this.lastAction === 'JUMP_TO_STATE';
+}
diff --git a/src/browser/extension/inject/pageScript.js b/src/browser/extension/inject/pageScript.js
@@ -1,6 +1,7 @@
 import createStore from '../../../app/store/createStore';
 import configureStore from '../../../app/store/configureStore';
 import { isAllowed } from '../options/syncOptions';
+import Monitor from '../../../app/service/Monitor';
 import { getLocalFilter, isFiltered, filterState } from '../utils/filters';
 import notifyErrors from '../utils/notifyErrors';
 import importState from '../utils/importState';
@@ -21,16 +22,15 @@ window.devToolsExtension = function(reducer, preloadedState, config) {
 
   let store;
   let shouldSerialize = config.serializeState || config.serializeAction;
-  let lastAction;
-  let lastTime;
-  let waitingTimeout;
   let errorOccurred = false;
-  let isMonitored = false;
   let isExcess;
   const instanceId = generateId(config.instanceId);
   const localFilter = getLocalFilter(config);
   const { statesFilter, actionsFilter } = config;
 
+  const monitor = new Monitor(relayState);
+  if (config.getMonitor) config.getMonitor(monitor);
+
   function relay(type, state, action, nextActionId) {
     const message = {
       type,
@@ -60,16 +60,6 @@ window.devToolsExtension = function(reducer, preloadedState, config) {
     relay('STATE', store.liftedStore.getState());
   }
 
-  function start() {
-    isMonitored = true;
-    relayState();
-  }
-
-  function stop() {
-    isMonitored = false;
-    clearTimeout(waitingTimeout);
-  }
-
   function onMessage(message) {
     switch (message.type) {
       case 'DISPATCH':
@@ -88,10 +78,10 @@ window.devToolsExtension = function(reducer, preloadedState, config) {
         relayState();
         return;
       case 'START':
-        start();
+        monitor.start();
         return;
       case 'STOP':
-        stop();
+        monitor.stop();
         relay('STOP');
     }
   }
@@ -111,39 +101,17 @@ window.devToolsExtension = function(reducer, preloadedState, config) {
     relay('INIT_INSTANCE');
   }
 
-  function monitorReducer(state = {}, action) {
-    if (!isMonitored) return state;
-    lastAction = action.type;
-    if (lastAction === '@@redux/INIT' && store.liftedStore) {
-      // Send new lifted state on hot-reloading
-      setTimeout(relayState, 0);
-    }
-    return state;
-  }
-
-  const monitorActions = [
-    'TOGGLE_ACTION', 'SWEEP', 'SET_ACTIONS_ACTIVE', 'IMPORT_STATE'
-  ];
-  function isWaiting() {
-    const currentTime = Date.now();
-    if (lastTime && currentTime - lastTime < 200) { // no more frequently than once in 200ms
-      stop();
-      waitingTimeout = setTimeout(start, 1000);
-      return true;
-    }
-    lastTime = currentTime;
-    return false;
-  }
-
   function handleChange(state, liftedState) {
-    if (!isMonitored) return;
+    if (!monitor.active) return;
     const nextActionId = liftedState.nextActionId;
     const liftedAction = liftedState.actionsById[nextActionId - 1];
     const action = liftedAction.action;
     if (action.type === '@@INIT') {
       relay('INIT', state, { timestamp: Date.now() });
-    } else if (!errorOccurred && monitorActions.indexOf(lastAction) === -1) {
-      if (lastAction === 'JUMP_TO_STATE' || isFiltered(action, localFilter) || isWaiting()) return;
+    } else if (!errorOccurred && !monitor.isMonitorAction()) {
+      if (
+         monitor.isTimeTraveling() || isFiltered(action, localFilter) || monitor.isWaiting()
+      ) return;
       const { maxAge } = window.devToolsOptions;
       relay('ACTION', state, liftedAction, nextActionId);
       if (!isExcess && maxAge) isExcess = liftedState.stagedActionIds.length >= maxAge;
@@ -160,7 +128,7 @@ window.devToolsExtension = function(reducer, preloadedState, config) {
       if (!isAllowed(window.devToolsOptions)) return next(reducer_, initialState_, enhancer_);
 
       store = stores[instanceId] =
-        configureStore(next, monitorReducer, config)(reducer_, initialState_, enhancer_);
+        configureStore(next, monitor.reducer, config)(reducer_, initialState_, enhancer_);
 
       init();
       store.subscribe(() => {