Refactor

Author: gaearon

examples/counter/package.json

@@ -28,8 +28,8 @@
     "node-libs-browser": "^0.5.2",
     "react-dock": "^0.1.0",
     "react-hot-loader": "^1.3.0",
-    "redux-devtools": "^3.0.0-alpha-6",
-    "redux-devtools-log-monitor": "^1.0.0-alpha-6",
+    "redux-devtools": "^3.0.0-alpha-7",
+    "redux-devtools-log-monitor": "^1.0.0-alpha-7",
     "webpack": "^1.9.11",
     "webpack-dev-server": "^1.9.0"
   }

examples/counter/src/store/configureStore.dev.js

@@ -6,7 +6,7 @@ import DevTools from '../containers/DevTools';
 
 const finalCreateStore = compose(
   applyMiddleware(thunk),
-  DevTools.enhance,
+  DevTools.instrument(),
   persistState(
     window.location.href.match(
       /[?&]debug_session=([^&]+)\b/

src/bindActionCreatorsRecursively.js src/bindActionCreatorsDeep.jssrc/bindActionCreatorsRecursively.js renamed to src/bindActionCreatorsDeep.js

@@ -1,13 +1,13 @@
 import { bindActionCreators } from 'redux';
 
-export default function bindActionCreatorsRecursively(actionCreators, dispatch) {
+export default function bindActionCreatorsDeep(actionCreators, dispatch) {
   return Object.keys(actionCreators).reduce((result, key) => {
     if (!actionCreators[key]) {
       return result;
     }
     switch (typeof actionCreators[key]) {
     case 'object':
-      result[key] = bindActionCreatorsRecursively(actionCreators[key], dispatch);
+      result[key] = bindActionCreatorsDeep(actionCreators[key], dispatch);
       break;
     case 'function':
       result[key] = bindActionCreators(actionCreators[key], dispatch);

src/connectMonitor.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
-import bindActionCreatorsRecursively from './bindActionCreatorsRecursively';
+import bindActionCreatorsDeep from './bindActionCreatorsDeep';
 import { connect } from 'react-redux';
-import { ActionCreators as devToolsActionCreators } from './enhance';
+import { ActionCreators as historyActionCreators } from './instrument';
 
 export default function connectMonitor({
   component,
@@ -10,15 +10,15 @@ export default function connectMonitor({
 }) {
   function mapStateToProps(state) {
     return {
-      devToolsState: state.devToolsState,
+      historyState: state.historyState,
       monitorState: state.monitorState
     };
   }
 
   function mapDispatchToProps(dispatch) {
     return {
-      devToolsActions: bindActionCreators(devToolsActionCreators, dispatch),
-      monitorActions: bindActionCreatorsRecursively(actionCreators, dispatch)
+      historyActions: bindActionCreators(historyActionCreators, dispatch),
+      monitorActions: bindActionCreatorsDeep(actionCreators, dispatch)
     };
   }
 

src/createDevTools.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import enhance from './enhance';
+import instrument from './instrument';
 import connectMonitor from './connectMonitor';
 
 export default function createDevTools(monitor) {
@@ -10,12 +10,12 @@ export default function createDevTools(monitor) {
       store: PropTypes.object.isRequired
     };
 
-    static enhance = enhance(Monitor.reducer);
+    static instrument = () => instrument(Monitor.reducer);
 
     render() {
       return (
         <Monitor {...this.props}
-                 store={this.context.store.devToolsStore} />
+                 store={this.context.store.instrumentedStore} />
       );
     }
   };

src/index.js

@@ -1,3 +1,3 @@
-export { default, ActionCreators, ActionTypes } from './enhance';
+export { default as instrument, ActionTypes } from './instrument';
 export { default as persistState } from './persistState';
 export { default as createDevTools } from './createDevTools';

src/enhance.js src/instrument.jssrc/enhance.js renamed to src/instrument.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 
-const ActionTypes = {
+export const ActionTypes = {
   PERFORM_ACTION: 'PERFORM_ACTION',
   RESET: 'RESET',
   ROLLBACK: 'ROLLBACK',
@@ -10,10 +10,41 @@ const ActionTypes = {
   JUMP_TO_STATE: 'JUMP_TO_STATE'
 };
 
-const INIT_ACTION = {
-  type: '@@INIT'
+/**
+ * Action creators to change the History state.
+ */
+export const ActionCreators = {
+  performAction(action) {
+    return { type: ActionTypes.PERFORM_ACTION, action, timestamp: Date.now() };
+  },
+
+  reset() {
+    return { type: ActionTypes.RESET, timestamp: Date.now() };
+  },
+
+  rollback() {
+    return { type: ActionTypes.ROLLBACK, timestamp: Date.now() };
+  },
+
+  commit() {
+    return { type: ActionTypes.COMMIT, timestamp: Date.now() };
+  },
+
+  sweep() {
+    return { type: ActionTypes.SWEEP };
+  },
+
+  toggleAction(index) {
+    return { type: ActionTypes.TOGGLE_ACTION, index };
+  },
+
+  jumpToState(index) {
+    return { type: ActionTypes.JUMP_TO_STATE, index };
+  }
 };
 
+const INIT_ACTION = { type: '@@INIT' };
+
 function toggle(obj, key) {
   const clone = { ...obj };
   if (clone[key]) {
@@ -52,8 +83,6 @@ function computeNextEntry(reducer, action, state, error) {
 
 /**
  * Runs the reducer on all actions to get a fresh computation log.
- * It's probably a good idea to do this only if the code has changed,
- * but until we have some tests we'll just do it every time an action fires.
  */
 function recomputeStates(reducer, committedState, stagedActions, skippedActions) {
   const computedStates = [];
@@ -77,10 +106,10 @@ function recomputeStates(reducer, committedState, stagedActions, skippedActions)
 }
 
 /**
- * Lifts the app state reducer into a DevTools state reducer.
+ * Creates a history state reducer from an app's reducer.
  */
-function createDevToolsStateReducer(reducer, initialCommittedState) {
-  const initialState = {
+function createHistoryReducer(reducer, initialCommittedState) {
+  const initialHistoryState = {
     committedState: initialCommittedState,
     stagedActions: [INIT_ACTION],
     skippedActions: {},
@@ -89,9 +118,9 @@ function createDevToolsStateReducer(reducer, initialCommittedState) {
   };
 
   /**
-   * Manages how the DevTools actions modify the DevTools state.
+   * Manages how the history actions modify the history state.
    */
-  return function devToolsState(state = initialState, action) {
+  return (historyState = initialHistoryState, historyAction) => {
     let shouldRecomputeStates = true;
     let {
       committedState,
@@ -100,34 +129,34 @@ function createDevToolsStateReducer(reducer, initialCommittedState) {
       computedStates,
       currentStateIndex,
       timestamps
-    } = state;
+    } = historyState;
 
-    switch (action.type) {
+    switch (historyAction.type) {
     case ActionTypes.RESET:
-      committedState = initialState;
+      committedState = initialCommittedState;
       stagedActions = [INIT_ACTION];
       skippedActions = {};
       currentStateIndex = 0;
-      timestamps = [action.timestamp];
+      timestamps = [historyAction.timestamp];
       break;
     case ActionTypes.COMMIT:
       committedState = computedStates[currentStateIndex].state;
       stagedActions = [INIT_ACTION];
       skippedActions = {};
       currentStateIndex = 0;
-      timestamps = [action.timestamp];
+      timestamps = [historyAction.timestamp];
       break;
     case ActionTypes.ROLLBACK:
       stagedActions = [INIT_ACTION];
       skippedActions = {};
       currentStateIndex = 0;
-      timestamps = [action.timestamp];
+      timestamps = [historyAction.timestamp];
       break;
     case ActionTypes.TOGGLE_ACTION:
-      skippedActions = toggle(skippedActions, action.index);
+      skippedActions = toggle(skippedActions, historyAction.index);
       break;
     case ActionTypes.JUMP_TO_STATE:
-      currentStateIndex = action.index;
+      currentStateIndex = historyAction.index;
       // Optimization: we know the history has not changed.
       shouldRecomputeStates = false;
       break;
@@ -142,16 +171,16 @@ function createDevToolsStateReducer(reducer, initialCommittedState) {
         currentStateIndex++;
       }
 
-      stagedActions = [...stagedActions, action.action];
-      timestamps = [...timestamps, action.timestamp];
+      stagedActions = [...stagedActions, historyAction.action];
+      timestamps = [...timestamps, historyAction.timestamp];
 
       // Optimization: we know that the past has not changed.
       shouldRecomputeStates = false;
       // Instead of recomputing the states, append the next one.
       const previousEntry = computedStates[computedStates.length - 1];
       const nextEntry = computeNextEntry(
         reducer,
-        action.action,
+        historyAction.action,
         previousEntry.state,
         previousEntry.error
       );
@@ -182,96 +211,58 @@ function createDevToolsStateReducer(reducer, initialCommittedState) {
 }
 
 /**
- * Lifts an app action to a DevTools action.
- */
-function liftAction(action) {
-  const liftedAction = {
-    type: ActionTypes.PERFORM_ACTION,
-    action,
-    timestamp: Date.now()
-  };
-  return liftedAction;
-}
-
-/**
- * Unlifts the DevTools state to the app state.
+ * Provides a view into the History state that matches the current app state.
  */
-function unliftState(liftedState) {
-  const { computedStates, currentStateIndex } = liftedState.devToolsState;
+function selectAppState(instrumentedState) {
+  const { computedStates, currentStateIndex } = instrumentedState.historyState;
   const { state } = computedStates[currentStateIndex];
   return state;
 }
 
 /**
- * Unlifts the DevTools store to act like the app's store.
+ * Deinstruments the History store to act like the app's store.
  */
-function mapToComputedStateStore(devToolsStore, wrapReducer) {
+function selectAppStore(instrumentedStore, instrumentReducer) {
   let lastDefinedState;
 
   return {
-    ...devToolsStore,
+    ...instrumentedStore,
 
-    devToolsStore,
+    instrumentedStore,
 
     dispatch(action) {
-      devToolsStore.dispatch(liftAction(action));
+      instrumentedStore.dispatch(ActionCreators.performAction(action));
       return action;
     },
 
     getState() {
-      const state = unliftState(devToolsStore.getState());
+      const state = selectAppState(instrumentedStore.getState());
       if (state !== undefined) {
         lastDefinedState = state;
       }
       return lastDefinedState;
     },
 
     replaceReducer(nextReducer) {
-      devToolsStore.replaceReducer(wrapReducer(nextReducer));
+      instrumentedStore.replaceReducer(instrumentReducer(nextReducer));
     }
   };
 }
 
 /**
- * Action creators to change the DevTools state.
+ * Redux History store enhancer.
  */
-export const ActionCreators = {
-  reset() {
-    return { type: ActionTypes.RESET, timestamp: Date.now() };
-  },
-
-  rollback() {
-    return { type: ActionTypes.ROLLBACK, timestamp: Date.now() };
-  },
-
-  commit() {
-    return { type: ActionTypes.COMMIT, timestamp: Date.now() };
-  },
-
-  sweep() {
-    return { type: ActionTypes.SWEEP };
-  },
-
-  toggleAction(index) {
-    return { type: ActionTypes.TOGGLE_ACTION, index };
-  },
-
-  jumpToState(index) {
-    return { type: ActionTypes.JUMP_TO_STATE, index };
-  }
-};
+export default function instrument(monitorReducer = () => null) {
+  return createStore => (reducer, initialState) => {
+    function instrumentReducer(r) {
+      const historyReducer = createHistoryReducer(r, initialState);
+      return ({ historyState, monitorState } = {}, action) => ({
+        historyState: historyReducer(historyState, action),
+        monitorState: monitorReducer(monitorState, action)
+      });
+    }
 
-/**
- * Redux DevTools store enhancer.
- */
-export default function enhance(monitorReducer = () => null) {
-  return next => (reducer, initialState) => {
-    const wrapReducer = (r) => combineReducers({
-      devToolsState: createDevToolsStateReducer(r, initialState),
-      monitorState: monitorReducer
-    });
-
-    const devToolsStore = next(wrapReducer(reducer));
-    return mapToComputedStateStore(devToolsStore, wrapReducer);
+    const instrumentedStore = createStore(instrumentReducer(reducer));
+    return selectAppStore(instrumentedStore, instrumentReducer);
   };
 }