Implement actionsFilter and statesFilter

Author: zalmoxisus

README.md

@@ -86,9 +86,22 @@
   - **deserializeAction(action): transformedAction** (*function*) - optional transformation of actions deserialized from debug session (useful if actions are not plain object. Example: immutable-js action payload)
     - action, transformedAction - Redux action objects
   - **actionsBlacklist** (*array*) - actions to be hidden in DevTools. Overwrites corresponding global setting in the options page.
-  - **actionsWhitelist** (*array*) - all other actions will be hidden in DevTools. Overwrites corresponding global setting in the options page.
+  - **actionsFilter** (*function*) - function which takes `action` object and id number as arguments, and should return `action` object back. See the example bellow.
+  - **statesFilter** (*function*) - function which takes `state` object and index as arguments, and should return `state` object back.
+      Example of usage:
+      
+      ```js
+      const actionsFilter = (action) => (
+        action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
+        { ...action, data: '<<LONG_BLOB>>' } : action
+      );
+      const store = createStore(rootReducer, window.devToolsExtension && window.devToolsExtension({
+        actionsFilter,
+        statesFilter: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state)
+      }));
+      ```
 
-## Examples
+## Demo
 Open these urls to test the extension:
 
  - [Counter](http://zalmoxisus.github.io/redux-devtools-extension/examples/counter/)

src/browser/extension/inject/pageScript.js

@@ -16,12 +16,13 @@ window.devToolsExtension = function(config = {}) {
 
   let store;
   let liftedStore;
-  let localFilter = getLocalFilter(config);
   let shouldSerialize = false;
   let lastAction;
   let errorOccurred = false;
   let isMonitored = false;
   let isExcess;
+  const localFilter = getLocalFilter(config);
+  const { statesFilter, actionsFilter } = config;
 
   function stringify(obj) {
     return jsan.stringify(obj);
@@ -42,15 +43,17 @@ window.devToolsExtension = function(config = {}) {
   function relay(type, state, action, nextActionId) {
     const message = {
       type,
-      payload: filterState(state, type, localFilter),
+      payload: filterState(state, type, localFilter, statesFilter, actionsFilter, nextActionId),
       source: 'redux-page',
       name: config.name || document.title
     };
 
-    if (action) message.action = action;
     if (type === 'ACTION') {
+      message.action = !actionsFilter ? action : actionsFilter(action.action, nextActionId - 1);
       message.isExcess = isExcess;
       message.nextActionId = nextActionId;
+    } else if (action) {
+      message.action = action;
     }
 
     if (shouldSerialize || window.devToolsOptions.serialize) {

src/browser/extension/utils/filters.js

@@ -1,3 +1,5 @@
+import mapValues from 'lodash/mapValues';
+
 export function getLocalFilter(config) {
   if (config.actionsBlacklist || config.actionsWhitelist) {
     return {
@@ -18,20 +20,59 @@ export function isFiltered(action, localFilter) {
   );
 }
 
-export function filterState(state, type, localFilter) {
-  if (type !== 'STATE' || !localFilter && !window.devToolsOptions.filter) return state;
-
-  const filteredStagedActionIds = [];
-  const filteredComputedStates = [];
-  state.stagedActionIds.forEach((id, idx) => {
-    if (!isFiltered(state.actionsById[id].action)) {
-      filteredStagedActionIds.push(id);
-      filteredComputedStates.push(state.computedStates[idx]);
-    }
-  });
-
-  return { ...state,
-    stagedActionIds: filteredStagedActionIds,
-    computedStates: filteredComputedStates
+function filterActions(actionsById, actionsFilter) {
+  if (!actionsFilter) return actionsById;
+  return mapValues(actionsById, (action, id) => (
+    { ...action, action: actionsFilter(action.action, id) }
+  ));
+}
+
+function filterStates(computedStates, statesFilter) {
+  if (!statesFilter) return computedStates;
+  return computedStates.map((state, idx) => (
+    { ...state, state: statesFilter(state.state, idx) }
+  ));
+}
+
+export function filterState(state, type, localFilter, statesFilter, actionsFilter, nextActionId) {
+  if (type === 'ACTION') return !statesFilter ? state : statesFilter(state, nextActionId - 1);
+  else if (type !== 'STATE') return state;
+
+  if (localFilter || window.devToolsOptions.filter) {
+    const filteredStagedActionIds = [];
+    const filteredComputedStates = [];
+    const filteredActionsById = actionsFilter && {};
+    const { actionsById } = state;
+    const { computedStates } = state;
+
+    state.stagedActionIds.forEach((id, idx) => {
+      if (!isFiltered(actionsById[id].action, localFilter)) {
+        filteredStagedActionIds.push(id);
+        filteredComputedStates.push(
+          statesFilter ?
+          { ...computedStates[idx], state: statesFilter(computedStates[idx].state, idx) } :
+          computedStates[idx]
+        );
+        if (actionsFilter) {
+          filteredActionsById[id] = {
+            ...actionsById[id], action: actionsFilter(actionsById[id].action, id)
+          };
+        }
+      }
+    });
+
+    return {
+      ...state,
+      actionsById: filteredActionsById || actionsById,
+      stagedActionIds: filteredStagedActionIds,
+      computedStates: filteredComputedStates
+    };
+  }
+
+  if (!statesFilter && !actionsFilter) return state;
+  return {
+    ...state,
+    actionsById: filterActions(state.actionsById, actionsFilter),
+    computedStates: filterStates(state.computedStates, statesFilter)
   };
 }