zalmoxisus/redux-devtools-filter-actions

Redux DevTools composable monitor with the ability to filter actions.

Redux DevTools Filter Actions

A composable monitor for Redux DevTools with the ability to specify actions to be hidden (blacklisted) or shown (whitelisted).

Installation

npm install --save-dev redux-devtools-filter-actions

Usage

Wrap any other Redux DevTools monitor in FilterMonitor. For example, you can use it together with LogMonitor:

containers/DevTools.js

import React from 'react';
import { createDevTools } from 'redux-devtools';
import FilterMonitor from 'redux-devtools-filter-actions';
import LogMonitor from 'redux-devtools-log-monitor';

// Stripping big data which slows down DevTools Monitor
const actionsFilter = (action) => (
  action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
  { ...action, data: '<<LONG_BLOB>>' } : action
);

export default createDevTools(
  <FilterMonitor
    blacklist={['ACTION1', 'ACTION2']}
    actionsFilter={actionsFilter}
    statesFilter={(state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state}
  >
    <LogMonitor />
  </FilterMonitor>
);

Also, you can wrap it into the DockMonitor to make it dockable.

Read how to start using Redux DevTools.

Props

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

MIT

redux-devtools-filter-actions's Issues

Wrong npm package name

Noted that the package in npm is named
redux-devtools-log-monitor-filtrable

but in the Readme it is named
redux-devtools-log-monitor-filterable.

Skip blacklisted actions

Is there a way of not replaying actions in the blacklist? I have code that waits for an action to be dispatched and them runs side-effects from there, by means of redux-saga:

function* saga( getState ){
  ...
  const getTasks = () => getState().TaskReducer;
  while(true){
    yield take(QUEUE);  //this is the line that waits for the next QUEUE action
    //those are the effects I don't wan't to redo
    for(const {type, payload} of getTasks()){switch(type){
      case SPAWN:  yield call(fetchSpawn, payload);  break;
      case INIT:  yield call(fetchInit, getWorkers(), payload);  break;
      case SUBSCRIBE:  yield call(fetchSubscribe, getWorkers(), payload);  break;
      ...
    }};
  }
}

Maybe we should make skipping blacklisted actions an option?
I am not sure if this could be useful in other cases, but I think it makes sense to be an addon. XD

Filtered actions + redux-devtools-log-monitor displays states from incorrect actions

I'm working on a game using redux. The game has its own run loop that dispatches a TICK action inside a requestAnimationFrame loop, so I was planning to use this component to filter that action.

I was surprised to see that when I triggered a non-tick action, causing an entry to display in the devtools monitor, the state that was reported seemed to be stale, as if it was computed from one of the first tick actions. Investigating the source of redux-devtools-log-monitor and redux-devtools-filter-actions, I quickly saw the problem:

• In FilterMonitor.js, the stagedActionIds array is filtered to remove blacklisted/include whitelisted actions.
• In LogMonitor.js, the stagedActionIds array is iterated over. The index of this iteration is used to look up the corresponding state from the computedStates passed from redux-devtools. However, computedStates contains all of the computed states, including blacklisted actions, meaning there's no way that this lookup will align with the filtered action IDs!

I'm not sure what the fix here is. I don't currently see any way to look up the correct computedState without having the index of the action. Maybe a map of action ID to state could be added to the props passed down from redux-devtools? A map of action ID to original index could also work.

FEATURE: Custom actions filter

In our project, we are using Symbols for action types(to avoid actions overlapping).
And in this case RegExp approach for filtering is not working(Symbols hasn't match method, and it doesn't make sense in Symbols scope).

I think it makes sense to have the property which allows overwriting algorithm for filtering actions.

Add regex and/or glob support

I'd imagine quite a few people are using this monitor to manage actions generated by Redux Form or other libraries. With Redux Form, the actions all have the signature redux-form/ACTION, so I end up having to do:

<FilterMonitor blacklist={ [
  'redux-form/CHANGE',
  'redux-form/BLUR',
  'redux-form/FOCUS',
  'redux-form/DESTROY',
  'redux-form/STOP_SUBMIT',
  // other actions
] }>

It would be nice to be able to do something like:

<FilterMonitor blacklist={ [
  /redux-form\//,
  // other actions
] }>

React 16

warning "[email protected]" has incorrect peer dependency "react@^0.14.9 || ^15.3.0".

Can this monitor be composable?

I'm thinking something like this:

import React from 'react';
import { createDevTools } from 'redux-devtools';
import FilterMonitor from 'redux-devtools-filter-actions';
import LogMonitor from 'redux-devtools-log-monitor';

export default createDevTools(
  <FilterMonitor filter={{ blacklist: ['ACTION1', 'ACTION2'], whitelist: ['ACTION1', 'ACTION2'] }}>
    <LogMonitor />
  </FilterMonitor>
);

In other words, make it an add-on to any existing monitor instead of maintaining a fork.

DockMonitor should give you an idea of how to implement composable monitor.
What you'd need to do is to pass filtered props to whatever monitor is inside.

Only filter action params in view

It will be nice if it will be possible to only filter action parameters.

I have for example action FILE_DOWNLOAD which is used for downloading data from backend. I have to use this middleware to prevent freeze of browser.

For me it will be sufficient see something like data: <filtered> and thus do not filter entire action from devtools. Is this possible?

PS: This can be useful for filtering out sensitive params too.

_Example_

const blacklist = [
  {
   name: 'FILE_DOWNLOAD_SUCCESS', 
   params: ['data']
  }
]

<DockMonitor toggleVisibilityKey="ctrl-H" changePositionKey="ctrl-Q">
  <FilterMonitor blacklist={blacklist}>
    <LogMonitor />
  </FilterMonitor>
</DockMonitor>