title: NgRx and redux dev tool performance issue due to Excessive use of memory and CPU
body: <p>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. </p>
  
  <pre><code>StoreDevToolsModule.instrument({
      name: 'AppName Dev Tools",
      logOnly: environment.production, 
      maxAge: 10 
  })
  </code></pre>
  
  <p>Then I saw warnings about "Excessive use of memory and CPU" and this link to the github doc: <a href="https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu" rel="nofollow noreferrer">https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu</a></p>
  
  <p>Enabling the reduxDev tool would crash the app, no buttons or tabs would be clickable. Even if I adjusted <code>maxAge</code> to 2, it's still very slow. No performance issue if ReduxDev tool is not enabled. </p>
  
  <p>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 <strong>doesn't</strong> 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. </p>
  
  <p>now trying to sanitize the above mentioned endpoint according to the docs section:</p>
  
  <pre><code>const actionSanitizer = (action) =&gt; (
    action.type === 'FILE_DOWNLOAD_SUCCESS' &amp;&amp; action.data ?
    { ...action, data: '&lt;&lt;LONG_BLOB&gt;&gt;' } : action
  );
  const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__({
    actionSanitizer,
    stateSanitizer: (state) =&gt; state.data ? { ...state, data: '&lt;&lt;LONG_BLOB&gt;&gt;' } : state
  }));
  </code></pre>
  
  <p>I found that our app which is based on this <a href="https://github.com/ngrx/platform/tree/master/projects/example-app/src" rel="nofollow noreferrer">sample project by ngrx</a> doesn't have a <code>createStore()</code>at all.  </p>
  
  <p>Questions:  1. where should I add the sanitizer given our project looks like <a href="https://github.com/ngrx/platform/tree/master/projects/example-app/src" rel="nofollow noreferrer">this</a>? </p>
  
  <ol start="2">
  <li>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. </li>
  </ol>
  
  <p>Edit1:</p>
  
  <p>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. </p>