Instance auto-switches undesirably

reduxjs / redux-devtools

DevTools for Redux with hot reloading, action replay, and customizable UI

http://youtube.com/watch?v=xsSnOQynTHs

MIT License

13.94k stars 1.15k forks source link

Instance auto-switches undesirably #1000

Open rart opened 2 years ago

rart commented 2 years ago

I have an app that has an iframe within. There's a redux instance on the top frame and another instance (different app) inside the iframe. The tools have the instance switcher dropdown which shows 3 values: "autoselect instance", "instance 1" and "instance 2".

No matter what's selected on the instance switcher, when ever an action happens on the top frame instance (i.e. instance 1), the tools go back to showing/selecting that instance — even when the action occurs on the instance 2.

It doesn't switch to instance 2 from instance one ever, only from 2 to 1 for all events.

It gets very disruptive when you're trying to debug on instance 2. It feels a lot like a bug.

Methuselah96 commented 2 years ago

If you would be able to create a minimal reproduction showing the issue that would be extremely helpful.

rart commented 2 years ago

@Methuselah96 here you go: rart/redux-devtools-issue-1000

To reproduce:

Fire up your webserver of choice on the root of the project directory (e.g. python -m SimpleHTTPServer 8000)
- If you serve from disk, the extension may not be enabled for the page
Go to the index.html
Open the Redux DevTools
- Notice there are 2 instances: "Top window" and "Iframe window"
Select the "Iframe window"
Dispatch an action from either frame using the "Dispatch action" that's on either page.
Notice the instance switcher changed back to "Top window"
- It is irrelevant where abouts the action came from, dispatching from top or iframe resets the instance switcher to look at the top window

https://user-images.githubusercontent.com/3928341/149294947-6defd003-cab7-4690-a542-1b6415ec38e0.mov

GreedyA1 commented 2 years ago

Have the same Issue :(

edant92 commented 2 years ago

I also have the same issue! It's really frustrating having to wait for the 'top' state to settle before being able to change to the iFrame state without it auto-switching.

The ability to turn off the auto-switching or 'lock' the active instance would be an ideal fix for this.

shilpihjp12 commented 1 year ago

Still this issue exist. It was working with redux toolkit version 1.7.2. We updated the redux toolkit version to now 1.9.3 and we started getting this problem for Iframe applications. can we get the help for this problem?

jose-vale commented 1 year ago

I also have the same issue, the only workaround I found that keeps the selected instance is to open in a panel instead of embedded in the browser window.

greg5green commented 1 year ago

The ability to turn off the auto-switching or 'lock' the active instance would be an ideal fix for this.

I 100% agree with this. We recently pulled in a non-NPM vendor chatbot script/library/package and have this same issue. Going to pursue with the vendor about either getting them to turn their devtools implementation off in production (preferred, because that's how it should be) or namespacing their events so I can set them to ignore, but having this lock to whatever instance the developer selected instead of flipping between whenever an event was fired would be GREAT

I can take a swing at it when I get time, but have no idea where to look at the moment and am hesitant to spend the time if maintainers are not at all interested in doing this/fixing this.

markerikson commented 1 year ago

@greg5green I'm not the main DevTools maintainer, but yeah, we're generally interested in useful/meaningful PRs as a whole. If you have time to look into it, please do!

greg5green commented 1 year ago

@markerikson If you could ping someone to comment on what file/part of the monorepo this would even be in, that would be appreciated. The "Development" section isn't great so the barrier to entry here is pretty high

markerikson commented 1 year ago

@greg5green : hmm. I'm familiar with a couple bits of this repo, but more so the devtools internal logic than the UI.

Searching for "Autoselect Instances", I see https://github.com/reduxjs/redux-devtools/blob/58a8135b085cd2b04a688c639ff62f782da14b8d/packages/redux-devtools-app/src/components/InstanceSelector.tsx , which is reading from state.instances.selected. That in turn points to https://github.com/reduxjs/redux-devtools/blob/58a8135b085cd2b04a688c639ff62f782da14b8d/packages/redux-devtools-app/src/actions/index.ts#L235-L241 for a selectInstance action creator, which is probably what's being used to trigger the change.

alexandcote commented 3 weeks ago

Annoyed by this issue for years, I decided to take some time and I found the problem: https://github.com/reduxjs/redux-devtools/pull/1692