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