/redux-devtools-filter-actions

Redux DevTools composable monitor with the ability to filter actions.

Primary LanguageJavaScriptMIT LicenseMIT

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