DevTools repeating code from removed reducers

[ivoiv]

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?

[Methuselah96]

Thanks for the thorough bug report! Can you create a reproducible example of this happening that I can look it? I have some ideas of what might be happening, but it'll be a lot easier to fix if I have a reproducible example.

[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 there was already an issue for this. Try out this solution.

Closing for now because I believe this is resolved. Let me know if that doesn't fix it.

[ivoiv]

@Methuselah96 It solves the dispatch repeating problem, but then introduces a new one - It either deletes or no longer shows the dispatch log/history.

More specifically, it either shows them for a second and then they get deleted from the list, or they get removed when the reducer is removed.

While better than repeating the dispatches, it certainly diminishes the usefulness of DevTools.

In CodeSandbox

In localhost

[Methuselah96]

@ivoiv Part of the problem is that your reducers have side effects. Redux considers it essential that reducers do not have side effects. It shouldn't matter that Redux DevTools is calling your reducer when you're replacing the reducer.

[ivoiv]

@Methuselah96 The side effect(console.log) is just for the purpose of debugging the error.

Even without it, in the CodeSandBox example, DevTools actually replays the dispatches and changes the value of someValue with every re-insert of the reducer.
While the shouldHotReload: false fix does alleviate the problem, it does mess up the log/history functionality of DevTools.

Which of the two issues do you think is easier to fix?

[Methuselah96]

Turns out that #378 is the original issue where this is brought up. Closing this in favor of that one.