Merge pull request #241 from echenley/master

add maxAge option

src/createDevTools.js

@@ -7,9 +7,6 @@ export default function createDevTools(children) {
   const monitorProps = monitorElement.props;
   const Monitor = monitorElement.type;
   const ConnectedMonitor = connect(state => state)(Monitor);
-  const enhancer = instrument((state, action) =>
-    Monitor.update(monitorProps, state, action)
-  );
 
   return class DevTools extends Component {
     static contextTypes = {
@@ -20,7 +17,10 @@ export default function createDevTools(children) {
       store: PropTypes.object
     };
 
-    static instrument = () => enhancer;
+    static instrument = (options) => instrument(
+      (state, action) => Monitor.update(monitorProps, state, action),
+      options
+    );
 
     constructor(props, context) {
       super(props, context);

src/instrument.js

@@ -138,7 +138,7 @@ function liftAction(action) {
 /**
  * Creates a history state reducer from an app's reducer.
  */
-function liftReducerWith(reducer, initialCommittedState, monitorReducer) {
+function liftReducerWith(reducer, initialCommittedState, monitorReducer, options) {
   const initialLiftedState = {
     monitorState: monitorReducer(undefined, {}),
     nextActionId: 1,
@@ -165,6 +165,31 @@ function liftReducerWith(reducer, initialCommittedState, monitorReducer) {
       computedStates
     } = liftedState;
 
+    function commitExcessActions(n) {
+      // Auto-commits n-number of excess actions.
+      let excess = n;
+      let idsToDelete = stagedActionIds.slice(1, excess + 1);
+
+      for (let i = 0; i < idsToDelete.length; i++) {
+        if (computedStates[i + 1].error) {
+          // Stop if error is found. Commit actions up to error.
+          excess = i;
+          idsToDelete = stagedActionIds.slice(1, excess + 1);
+          break;
+        } else {
+          delete actionsById[idsToDelete[i]];
+        }
+      }
+
+      skippedActionIds = skippedActionIds.filter(id => idsToDelete.indexOf(id) === -1);
+      stagedActionIds = [0, ...stagedActionIds.slice(excess + 1)];
+      committedState = computedStates[excess].state;
+      computedStates = computedStates.slice(excess);
+      currentStateIndex = currentStateIndex > excess
+        ? currentStateIndex - excess
+        : 0;
+    }
+
     // By default, agressively recompute every state whatever happens.
     // This has O(n) performance, so we'll override this to a sensible
     // value whenever we feel like we don't have to recompute the states.
@@ -235,6 +260,11 @@ function liftReducerWith(reducer, initialCommittedState, monitorReducer) {
         break;
       }
       case ActionTypes.PERFORM_ACTION: {
+        // Auto-commit as new actions come in.
+        if (options.maxAge && stagedActionIds.length === options.maxAge) {
+          commitExcessActions(1);
+        }
+
         if (currentStateIndex === stagedActionIds.length - 1) {
           currentStateIndex++;
         }
@@ -264,6 +294,25 @@ function liftReducerWith(reducer, initialCommittedState, monitorReducer) {
       case '@@redux/INIT': {
         // Always recompute states on hot reload and init.
         minInvalidatedStateIndex = 0;
+
+        if (options.maxAge && stagedActionIds.length > options.maxAge) {
+          // States must be recomputed before committing excess.
+          computedStates = recomputeStates(
+            computedStates,
+            minInvalidatedStateIndex,
+            reducer,
+            committedState,
+            actionsById,
+            stagedActionIds,
+            skippedActionIds
+          );
+
+          commitExcessActions(stagedActionIds.length - options.maxAge);
+
+          // Avoid double computation.
+          minInvalidatedStateIndex = Infinity;
+        }
+
         break;
       }
       default: {
@@ -339,7 +388,7 @@ function unliftStore(liftedStore, liftReducer) {
 /**
  * Redux instrumentation store enhancer.
  */
-export default function instrument(monitorReducer = () => null) {
+export default function instrument(monitorReducer = () => null, options = {}) {
   return createStore => (reducer, initialState, enhancer) => {
 
     function liftReducer(r) {
@@ -354,7 +403,7 @@ export default function instrument(monitorReducer = () => null) {
         }
         throw new Error('Expected the reducer to be a function.');
       }
-      return liftReducerWith(r, initialState, monitorReducer);
+      return liftReducerWith(r, initialState, monitorReducer, options);
     }
 
     const liftedStore = createStore(liftReducer(reducer), enhancer);

test/instrument.spec.js

@@ -19,6 +19,15 @@ function counterWithBug(state = 0, action) {
   }
 }
 
+function counterWithAnotherBug(state = 0, action) {
+  switch (action.type) {
+    case 'INCREMENT': return mistake + 1; // eslint-disable-line no-undef
+    case 'DECREMENT': return state - 1;
+    case 'SET_UNDEFINED': return undefined;
+    default: return state;
+  }
+}
+
 function doubleCounter(state = 0, action) {
   switch (action.type) {
   case 'INCREMENT': return state + 2;
@@ -295,6 +304,166 @@ describe('instrument', () => {
     expect(monitoredLiftedStore.getState().computedStates).toBe(savedComputedStates);
   });
 
+  describe('maxAge option', () => {
+    let configuredStore;
+    let configuredLiftedStore;
+
+    beforeEach(() => {
+      configuredStore = createStore(counter, instrument(undefined, { maxAge: 3 }));
+      configuredLiftedStore = configuredStore.liftedStore;
+    });
+
+    it('should auto-commit earliest non-@@INIT action when maxAge is reached', () => {
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      let liftedStoreState = configuredLiftedStore.getState();
+
+      expect(configuredStore.getState()).toBe(2);
+      expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
+      expect(liftedStoreState.committedState).toBe(undefined);
+      expect(liftedStoreState.stagedActionIds).toInclude(1);
+
+      // Trigger auto-commit.
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      liftedStoreState = configuredLiftedStore.getState();
+
+      expect(configuredStore.getState()).toBe(3);
+      expect(Object.keys(liftedStoreState.actionsById).length).toBe(3);
+      expect(liftedStoreState.stagedActionIds).toExclude(1);
+      expect(liftedStoreState.computedStates[0].state).toBe(1);
+      expect(liftedStoreState.committedState).toBe(1);
+      expect(liftedStoreState.currentStateIndex).toBe(2);
+    });
+
+    it('should remove skipped actions once committed', () => {
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      configuredLiftedStore.dispatch(ActionCreators.toggleAction(1));
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      expect(configuredLiftedStore.getState().skippedActionIds).toInclude(1);
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      expect(configuredLiftedStore.getState().skippedActionIds).toExclude(1);
+    });
+
+    it('should not auto-commit errors', () => {
+      let spy = spyOn(console, 'error');
+
+      let storeWithBug = createStore(counterWithBug, instrument(undefined, { maxAge: 3 }));
+      let liftedStoreWithBug = storeWithBug.liftedStore;
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'INCREMENT' });
+      expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(3);
+
+      storeWithBug.dispatch({ type: 'INCREMENT' });
+      expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(4);
+
+      spy.restore();
+    });
+
+    it('should auto-commit actions after hot reload fixes error', () => {
+      let spy = spyOn(console, 'error');
+
+      let storeWithBug = createStore(counterWithBug, instrument(undefined, { maxAge: 3 }));
+      let liftedStoreWithBug = storeWithBug.liftedStore;
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'INCREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(7);
+
+      // Auto-commit 2 actions by "fixing" reducer bug, but introducing another.
+      storeWithBug.replaceReducer(counterWithAnotherBug);
+      expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(5);
+
+      // Auto-commit 2 more actions by "fixing" other reducer bug.
+      storeWithBug.replaceReducer(counter);
+      expect(liftedStoreWithBug.getState().stagedActionIds.length).toBe(3);
+
+      spy.restore();
+    });
+
+    it('should update currentStateIndex when auto-committing', () => {
+      let liftedStoreState;
+      let currentComputedState;
+
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      liftedStoreState = configuredLiftedStore.getState();
+      expect(liftedStoreState.currentStateIndex).toBe(2);
+
+      // currentStateIndex should stay at 2 as actions are committed.
+      configuredStore.dispatch({ type: 'INCREMENT' });
+      liftedStoreState = configuredLiftedStore.getState();
+      currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
+      expect(liftedStoreState.currentStateIndex).toBe(2);
+      expect(currentComputedState.state).toBe(3);
+    });
+
+    it('should continue to increment currentStateIndex while error blocks commit', () => {
+      let spy = spyOn(console, 'error');
+
+      let storeWithBug = createStore(counterWithBug, instrument(undefined, { maxAge: 3 }));
+      let liftedStoreWithBug = storeWithBug.liftedStore;
+
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+
+      let liftedStoreState = liftedStoreWithBug.getState();
+      let currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
+      expect(liftedStoreState.currentStateIndex).toBe(4);
+      expect(currentComputedState.state).toBe(0);
+      expect(currentComputedState.error).toExist();
+
+      spy.restore();
+    });
+
+    it('should adjust currentStateIndex correctly when multiple actions are committed', () => {
+      let spy = spyOn(console, 'error');
+
+      let storeWithBug = createStore(counterWithBug, instrument(undefined, { maxAge: 3 }));
+      let liftedStoreWithBug = storeWithBug.liftedStore;
+
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+
+      // Auto-commit 2 actions by "fixing" reducer bug.
+      storeWithBug.replaceReducer(counter);
+      let liftedStoreState = liftedStoreWithBug.getState();
+      let currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
+      expect(liftedStoreState.currentStateIndex).toBe(2);
+      expect(currentComputedState.state).toBe(-4);
+
+      spy.restore();
+    });
+
+    it('should not allow currentStateIndex to drop below 0', () => {
+      let spy = spyOn(console, 'error');
+
+      let storeWithBug = createStore(counterWithBug, instrument(undefined, { maxAge: 3 }));
+      let liftedStoreWithBug = storeWithBug.liftedStore;
+
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      storeWithBug.dispatch({ type: 'DECREMENT' });
+      liftedStoreWithBug.dispatch(ActionCreators.jumpToState(1));
+
+      // Auto-commit 2 actions by "fixing" reducer bug.
+      storeWithBug.replaceReducer(counter);
+      let liftedStoreState = liftedStoreWithBug.getState();
+      let currentComputedState = liftedStoreState.computedStates[liftedStoreState.currentStateIndex];
+      expect(liftedStoreState.currentStateIndex).toBe(0);
+      expect(currentComputedState.state).toBe(-2);
+
+      spy.restore();
+    });
+  });
+
   describe('Import State', () => {
     let monitoredStore;
     let monitoredLiftedStore;