Add actionsFilter and statesFilter props

Author: zalmoxisus

README.md

@@ -22,7 +22,15 @@ import FilterMonitor from 'redux-devtools-filter-actions';
 import LogMonitor from 'redux-devtools-log-monitor';
 
 export default createDevTools(
-  <FilterMonitor blacklist={['ACTION1', 'ACTION2']}>
+  <FilterMonitor
+    blacklist={['ACTION1', 'ACTION2']}
+    actionsFilter={(action) => (
+                                 action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
+                                 { ...action, data: '<<LONG_BLOB>>' } : action
+                               )
+    }
+    statesFilter={(state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state}
+  >
     <LogMonitor />
   </FilterMonitor>
 );
@@ -38,6 +46,8 @@ Name                  | Description
 -------------         | -------------
 `blacklist`           | An array of actions (regex as string) to be hidden in the child monitor.
 `whitelist`           | An array of actions (regex as string) to be shown. If specified, other than those actions will be hidden (the 'blacklist' parameter will be ignored).
+`actionsFilter`       | Function which takes `action` object and id number as arguments, and should return `action` object back. See the example above.
+`statesFilter`        | Function which takes `state` object and index as arguments, and should return `state` object back. See the example above.
 
 ### License
 

package.json

@@ -3,7 +3,9 @@
   "version": "1.1.2",
   "description": "A composable monitor for Redux DevTools with the ability to filter actions.",
   "main": "lib/index.js",
-  "files": ["lib"],
+  "files": [
+    "lib"
+  ],
   "scripts": {
     "clean": "rimraf lib",
     "build": "babel src --out-dir lib",
@@ -51,5 +53,8 @@
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0-0",
     "redux-devtools": "^3.0.0"
+  },
+  "dependencies": {
+    "lodash": "^4.12.0"
   }
 }

src/FilterMonitor.js

@@ -1,4 +1,5 @@
 import { cloneElement, Component, PropTypes } from 'react';
+import mapValues from 'lodash/mapValues';
 import reducer from './reducers';
 
 export default class FilterMonitor extends Component {
@@ -20,30 +21,55 @@ export default class FilterMonitor extends Component {
 
   render() {
     let {
-        whitelist, blacklist, monitorState, children,
-        stagedActionIds, computedStates,
+        whitelist, blacklist, actionsFilter, statesFilter,
+        monitorState, children, actionsById, stagedActionIds, computedStates,
         ...rest
       } = this.props;
-    const filteredStagedActionIds = [];
-    const filteredComputedStates = [];
+    let filteredStagedActionIds = [];
+    let filteredComputedStates = [];
+    let filteredActionsById = {};
 
     if (whitelist || blacklist) {
       stagedActionIds.forEach((id, idx) => {
-        if (this.isNotFiltered(rest.actionsById[id].action.type)) {
+        if (this.isNotFiltered(actionsById[id].action.type)) {
           filteredStagedActionIds.push(id);
-          filteredComputedStates.push(computedStates[idx]);
+          filteredComputedStates.push(
+            statesFilter ?
+            { ...computedStates[idx], state: statesFilter(computedStates[idx].state, idx) } :
+            computedStates[idx]
+          );
+          filteredActionsById[id] = (
+            actionsFilter ?
+              { ...actionsById[id], action: actionsFilter(actionsById[id].action, id) } :
+              actionsById[id]
+          );
         }
       });
 
       rest = {
         ...rest,
+        actionsById: filteredActionsById,
         stagedActionIds: filteredStagedActionIds,
         computedStates: filteredComputedStates
       };
     } else {
+      if (actionsFilter) {
+        filteredActionsById = mapValues(actionsById, (action, id) => (
+          { ...action, action: actionsFilter(action.action, id) }
+        ));
+      } else filteredActionsById = actionsById;
+
+      if (statesFilter) {
+        filteredComputedStates = computedStates.map((state, idx) => (
+          { ...state, state: statesFilter(state.state, idx) }
+        ));
+      } else filteredComputedStates = computedStates;
+
       rest = {
         ...rest,
-        stagedActionIds, computedStates
+        stagedActionIds,
+        actionsById: filteredActionsById,
+        computedStates: filteredComputedStates
       };
     }