gaearon/redux-devtools-log-monitor

Performance problem for very large states

Closed this issue · 4 comments

Context:

I'm in the beginnings of writing a new app, the state/backend is mostly fleshed out, in the frontend I only have a single form input element styled with material design light for trying out state changes.

  • Each keystroke I dispatch a state update since I hold customer data there.
  • The state object is currently artifically big (includes a 36kb json) since I'm holding some mock data that won't be there when the app gets further developed.

I'm using the following packages:

    "redux-devtools": "^3.0.0-beta-3",
    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
    "redux-devtools-log-monitor": "^1.0.0-beta-3",

Problem:

After only 30 or so characters the UI becomes super laggy, this is solved by committing the current state in the devtools log monitor. Obviously it happens right back after typing again. So it's clear the state is too big to be duplicated on every action (like the logger does)

Is there any workaround around this? Probably an automatic clear after a certain size would be nice, although ultimately using diffs between states changes and storing only that would be the way to go.

It would be nice to be able to auto-commit actions after a certain point. I'm having a similar issue using Redux Form, which fires actions for focus/blur/change events. In the meantime you can check out https://github.com/zalmoxisus/redux-devtools-filter-actions/ to filter out high-frequency actions.

It would be nice to be able to auto-commit actions after a certain point.

This is a good feature request for the main Redux DevTools repo. I’d imagine an optional argument: DevTools.instrument({ maxActions: 30 }). This would be implemented in instrument.js and covered by tests. Would you like to try?

@gaearon Sounds good! I'll take a look at it tomorrow.

maxAge option is now available in Redux DevTools 3.2.0.