> [!question] Prompt
> Using ngrx with large amounts of complex data (fhir compositions), the website becomes very slow when Redux DevTools is monitoring the ngrx store. What are my options?
Redux DevTools is a powerful tool for debugging your state management, but it can lead to performance issues, especially with large and complex data sets. There are several strategies you can use to mitigate these performance issues.
1. **Disable DevTools in Production**: Redux DevTools should only be used in development environments. Always ensure it is disabled in production. If you're encountering performance issues in a production environment, make sure the devtools are not mistakenly included.
2. **Limit the Actions History**: Redux DevTools saves a history of all actions, and the entire state of the application after each action. This feature can be memory-intensive with complex data. You can limit the number of actions saved in the history using the `maxAge` option in your DevTools configuration.
```javascript
const store = createStore(
reducer,
devToolsEnhancer({
// Restricts extension to log only the last 50 actions
maxAge: 50
})
);
```
3. **State Sanitization**: You can configure Redux DevTools to ignore certain actions, or to sanitize large state properties. For instance, you could configure the devtools to ignore certain large chunks of state from being serialized and logged. This can be done using the `actionSanitizer` and `stateSanitizer` options in the DevTools configuration.
```javascript
const store = createStore(
reducer,
devToolsEnhancer({
// Log only certain parts of the state
stateSanitizer: (state) => state.data ? {...state, data: '<<LONG_BLOB>>'} : state,
// Log only certain actions
actionSanitizer: (action) => action.type === 'DATA_LOADED' ? {...action, data: '<<LONG_BLOB>>'} : action
})
);
```
4. **Selective State Tree Monitoring**: Depending on the complexity of your state tree and the Redux DevTools configuration, you might be able to reduce the performance impact by narrowing down the sections of your state tree that Redux DevTools monitors. You can ignore some parts of the state that are less relevant to the problem you're trying to debug.
5. **On-Demand Monitoring**: Instead of running Redux DevTools continuously, you might consider running it on-demand. You can use the `start` and `stop` methods of the extension to control when the extension monitors your app.
Remember, Redux DevTools is a development tool and while it's useful for understanding state changes and actions over time, it can cause performance issues if it's left on indefinitely, especially with large states. Always make sure to use it judiciously.