Filter out actions in redux devtool extension

Question

I have an action which is dispatched every one second. Its dispatched from a web socket connection which receives data every one second.

This causes my devtool to be filled with a lot of these actions and therefore makes debugging hard for other actions and stuff.

Is there a way to filter out all this "noise" from the logger

I tried doing the following:

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    actionsBlacklist: 'METER_DATA_RECEIVE'
  }) || compose;

but this not only filters out the action from the logger but also from the application. i.e, it isn't dispatched so its as good as not calling the action which is what I don't want.

In other words, I want the actions dispatched but not logged in the redux dev tool

score 10 · Answer 1 · answered Mar 18 '19 at 12:28

10

You can configure this within the browser.

In the Redux DevTools Extension settings there is an option Filter actions in DevTools. Just enter "METER_DATA_RECEIVE" there.

To modify the extension settings either click the gear icon in the very bottom right corner of the Redux tab or select Extension Options in the Chrome Extension details screen.

answered Mar 18 '19 at 12:28

romor

1,181
15
22

Doesn't work. It causes redux to also ignore those actions which causes the store to not update at all. – Krimson Mar 22 '19 at 04:30
2

The application still gets these messages and its store updates. But you are right, since the Redux extension does not show this action, you also do not see the new state there. However, any new (and shown) action in the Redux extension will give you the current state of store (including changes from filtered actions). – romor Jun 08 '19 at 06:22
I had to right click the extension icon and then press `options`. – Walter Monecke May 25 '22 at 20:36
DONT DO THIS. I lost 2 days of work by doing this. – Walter Monecke May 27 '22 at 13:24

score 4 · Answer 2 · answered Jun 17 '19 at 10:44

I'm filtering out actions within my code using this method its working perfectly - actions are filtererd out but still dispatched.

If you are using other middlewear, perhaps this is messing with it.

middlewares.push(ReduxPromise, reduxThunk);
let composeEnhancers = compose;

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    actionsBlacklist: [
         'METER_DATA_RECEIVE',
         'METER_UPLOAD_PARTS',
    ]
  }) || compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware(...middlewares)));

score 0 · Answer 3 · answered Jan 08 '19 at 22:53

0

Have you tried this add-on...

https://github.com/bvaughn/redux-devtools-filterable-log-monitor

answered Jan 08 '19 at 22:53

varoons

3,807
1
16
20

Filter out actions in redux devtool extension

3 Answers3