NgRx and redux dev tool performance issue due to Excessive use of memory and CPU

Question

Recently joined a new project that uses Angular and Redux. but it has not enabled the chrome redux dev tool. I noticed that it's commented out from the app.module.ts section. So I un-commented this section.

StoreDevToolsModule.instrument({
    name: 'AppName Dev Tools",
    logOnly: environment.production, 
    maxAge: 10 
})

Then I saw warnings about "Excessive use of memory and CPU" and this link to the github doc: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu

Enabling the reduxDev tool would crash the app, no buttons or tabs would be clickable. Even if I adjusted maxAge to 2, it's still very slow. No performance issue if ReduxDev tool is not enabled.

Since the document says "it's due to serialization of some huge objects." Then I started to look through the app to see what that maybe. My app doesn't have pictures or videos. And the only API that may be considered large is an endpoint that returns a dropdown content of 4.5 MB. And I think it's stored by previous devs because this dropdown content is used in multiple tabs across the app.

now trying to sanitize the above mentioned endpoint according to the docs section:

const actionSanitizer = (action) => (
  action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
  { ...action, data: '<<LONG_BLOB>>' } : action
);
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  actionSanitizer,
  stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
}));

I found that our app which is based on this sample project by ngrx doesn't have a createStore()at all.

Questions: 1. where should I add the sanitizer given our project looks like this?

2. I don't really understand how a large dropdown data (all text in a tree structure) can be hard to serialize. Also is 4.5mb considered large? I saw from Task Manager that when Redux Dev tools was enabled it's using 1-2 GB of memory. So maybe it's some other issue that I'm not aware of? Thanks.

Edit1:

Tried 1st answer and added state and action reducer to the StoreDevToolsModule.instrument({}) section. but the performance is still quite poor. MaxAge is set to 4. I can visualize the whole tree now. but it's still causing chrome to crash.

Answer 1

These can be configured via the StoreDevtoolsModule.instrument configuration.

See the docs for more info