redux-devtools-extension
redux-devtools-extension copied to clipboard
zalmoxisus
Latest update causes issues with multiple redux stores nested in iFrames.
In the latest version of Chrome Redux DevTools if you have multiple redux instances which are viewable the inspector always switches to the top instance in the list anytime an action is dispatched from any instance. This is very annoying as the instance I am trying to inspect is the second one in the list and anytime an action is fired the inspector switches to the first instance on the list at which point I must click back to the instance I was previously viewing.
Our application has multiple apps with redux which are viewable at a time which makes this a very tedious thing to keep clicking back when trying to debug nearly anything.
Thanks for the report. I'll look into it. If you can set a simple example on jsfiddle to reproduce, that would be helpful, as I don't have an example with multiple stores to check atm.
@kiwdahc I modified our counter example to have 2 stores + another 2 in different frames. As seen bellow it works as expected. For "Autoselect instances" it jumps between instances depending on which dispatched the action. When selecting explecitely an instance, it shows only actions of that instance.
UPDATE: I suspect that in your case the stores are created and destroyed everytime. I tried that as well, and still no issues noticed.
I will do some more digging to see what exactly is causing the issue, and look more into the exact structure of our apps to see what is causing it.
I did however find a work around after creating this post and that was to click one of the external window buttons in the bottom left corner because the window that produces does not switch to the top instance upon each action.
@zalmoxisus Also another thing of note before I try to recreate the issue besides the above comment is that I never saw this issue until December 13th, our apps were all working properly with the inspector before this. This effect started for me and one of my co-workers on or before Dec 13th.
@kiwdahc thanks for all the details! Yes, that autoselecting works only for devpanel and pageaction popup, not when opened in a window. And yes it was introduced beginning of December in #580.
I'll do a major refactoring on how the extension communicates in next version and this should be more stable as well.
@zalmoxisus It seems one of our applications redux store instance is stealing focus from any redux instance when any actions are fired in any of the open instances. I haven't found what is different about this instance yet but I am still digging. It even steals focus from a basic jsfiddle redux example. I have noticed though that if the instances are in different browser windows it doesn't steal the focus.
I'm seeing the same behavior. I have two React applications, one running in the iframe of another, and the instances keep switching automatically on every new action even when I choose one explicitly.
Yes this has been happening for us since early December with the same scenario you are having one app in an Iframe with other redux apps inside of it. The only way we are able to currently resolve the issue is either 1. working in an Incognito mode tab, or 2. clicking the external window button in the bottom left corner of the redux devtool inspector which opens the inspector into its own window. Not sure why either of these are resolving the issue but both of them prevent the auto-select instance from stealing focus, but both of them are not great solutions especially the external window one since it is constantly needing to be opened and closed on refreshes.
No problem, this is still an issue for our whole organization and most people using multiple apps of redux within nested iframes.
Having the same issue, got 2 angular apps and it keeps switching to the one I am not inspecting. Pretty annoying, would love it fixed.
Using kiwdahc's workaround from Dec 2018 is working for me. I wonder if this issue is caused by using other libraries that have redux as a dependency (e.g., react-beautiful-dnd as mentioned here).
