Skip to content

v2.9.0

Compare
Choose a tag to compare
@zalmoxisus zalmoxisus released this 01 Nov 12:29
· 264 commits to master since this release

Now Redux DevTools Extension is way more performant out of the box. Before highly updated apps would flood the extension causing it to take all the CPU.

Here's an autotodo example with lots of data and even containing circular references in the state. As you notice 100% of CPU is taken for rerendering React components while the extension takes only about 20%:

fsunave82q

Also you can check autoincremening example for a lighter demo.

While the extension is running in a separate process, 20% for a highly updated app shouldn't be a problem. If you want it to have no impact at all, set the latency parameter to 1000 ms or more, as you usually don't get to investigate more than one action per second. If the state is huge, you can either set maxAge parameter to 30 or less or strip that payload by using actionSanitizer / stateSanitizer parameters.

Example of usage:

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  latency: 1000,
  maxAge: 30,
  stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
}));

If you still want all the changes to be available immediately, set latency parameter to 0. Also the extension strips circular reference to gain the performance. If you want them to be serialized, set serializeAction / serializeState to false. If you want it in the fast mode keep them as undefined (which is by default).