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

Soandso

Answer 1

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.

Martimartial

Doesn't work. It causes redux to also ignore those actions which causes the store to not update at all. – Soandso

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). – Martimartial

I had to right click the extension icon and then press options. – Cynthla

DONT DO THIS. I lost 2 days of work by doing this. – Cynthla

Answer 2

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)));

Fortuna

It's now showing actionsBlacklist as deprecated. It suggests to use actionsDenyList instead. It works perfect, thank you! – Ewald

Answer 3

Have you tried this add-on...

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

Addiel

Answer 4

In 2023, using RTK, Redux Toolkit:

const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware)=> getDefaultMiddleware(),
devTools: {actionsDenyList: [‘mySlice/myAction’]}
)};
  

Lexis

Answer 5

Same as Lynne's answer, if you're looking to solve this in 2024, put your filtered out action in the actionsDenyList. For me it was:

configureStore({
    reducer: {
      ...
    },
    devTools: import.meta.env.DEV ? {actionsDenylist: ['state/onNow', 'state/onMessage']} : false,
    middleware: (gdm) =>
      gdm({
        ...
      }).concat(...),
    preloadedState,
  });

Nutbrown