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