DevTools repeating code from removed reducers

I have a special component and store setup, where when a certain component mounts, it creates a reducer for itself and adds it to the store via replaceReducer. When the component gets unmounted, it removes its reducer from the store.

However, every time the component gets mounted again, Redux DevTools re-executes all the code executed by the reducer during ALL the component’s previous lifetimes.

If the component was mounted 10 times, and did 10 calls during each lifetime, the 11th time the component is mounted, DevTools repeats all 100 calls.

This does NOT trigger an actual action in the DevTools Log, and no dispatches actually get sent, and no changes happen to the state/reducer.

It DOES however repeat all code within the reducer, be it JavaScript code, or API calls.

1. After clicking a button 10 times clicks, calls, a value in the redux store reaches 10(shows 9 due to stale state in the log)
2. After that the component is unmounted, reducer is removed from store.
3. Component gets mounted again, reducer added to store, calls initialised to 0.
4. On re-mounting the component(or rather re-inserting the reducer), DevTools “automatically” runs all the code the component executed, without any interaction from me.
5. Furthermore it prints the value of calls as it was when the dispatch was originally called, so it has no connection to the actual store, since both at the start and end of those, the value of calls in the store is still actually 0.

This does not happen with DevTools disabled from the Chrome Extensions panel, so this is a DevTools problem.

Do you have any tips on how to fix this?

[ivoiv]

@Methuselah96 Here’s a simple reproduction https://codesandbox.io/s/keen-rosalind-xt0mk

Things get really whacky in CodeSandBox.

Depending on when in the application lifetime I open the DevTools window, it produces different “log spam” in different order. Sometimes it spams out of the actions after i remount the component, sometimes it just triggers them together with the originals.

This time it also appears that it actually triggers the store dispatches and updates the value in the store, without any of the repeated actions actually appearing in the Inspector however.

I notice also a lot of errors being spat out in the console that I don’t see in my own code. Most of them disappear once i deactivate Dev Tools, and the rest i’m not sure if they come from React, JS or from Codesandbox’s own code.

The implementation is by the way not the same as my own code as I’m using a lot of hook creators, custom contexts and utility functions, but the jist of it and the result is identical.

[Methuselah96]

Turns out that https://github.com/reduxjs/redux-devtools/issues/378 is the original issue where this is brought up. Closing this in favor of that one.