reduxjs / redux-devtools

DevTools for Redux with hot reloading, action replay, and customizable UI
http://youtube.com/watch?v=xsSnOQynTHs
MIT License
13.99k stars 1.16k forks source link

Doesn't automatically follow state anymore #1081

Open taylorwoodman opened 2 years ago

taylorwoodman commented 2 years ago

In the previous version when I'd open my dev tools it'd automatically display the most up to date state object but now I have to click on an action to see what the state is. This makes it so I have to keep clicking actions to keep seeing the most up to date state instead of being able to watch the state object change as I'm dispatching actions

musfiqus commented 2 years ago

Same here.

GBouffard commented 2 years ago

Same here as well.

Methuselah96 commented 2 years ago

I'm having trouble reproducing the issue you're describing. When I click on the State tab with no action selection it shows the latest state which keeps updating. Does it show anything for you when you have the State tab selected?

adam-fm commented 2 years ago

@Methuselah96 This is what I see when I first open up the dev tools, when previously it would be the up-to-date state. This happened all of a sudden, and not from changing settings.

Screen Shot 2022-02-11 at 9 17 33 AM

.

mjbour commented 2 years ago

Same here

djflorio commented 2 years ago

I've been experiencing the same issue for roughly 1 month. A few weeks ago I uninstalled and reinstalled the extension, and it worked normally for a few weeks before randomly starting this behavior again this morning. I tried reinstalling again, but this time it didn't work.

Here's a gif of the issue. You can see that workflows/setTotalPageCount is selected, and when additional actions are fired, the inspector stays locked on workflows/setTotalPageCount.

reduxdevtoolsissue4

Chrome Version 98.0.4758.102 (Official Build) (64-bit) Redux DevTools 3.0.9

junyi-peng-kr commented 2 years ago

I am facing the same issue here, but it only occurs on the normal mode chrome windows, if I open with incognito mode, the state is always update-to-date.

Methuselah96 commented 2 years ago

Some diagnostic questions:

mjbour commented 2 years ago

I've been experiencing the same issue for roughly 1 month. A few weeks ago I uninstalled and reinstalled the extension, and it worked normally for a few weeks before randomly starting this behavior again this morning. I tried reinstalling again, but this time it didn't work.

Here's a gif of the issue. You can see that workflows/setTotalPageCount is selected, and when additional actions are fired, the inspector stays locked on workflows/setTotalPageCount.

reduxdevtoolsissue4

Chrome Version 98.0.4758.102 (Official Build) (64-bit) Redux DevTools 3.0.9

this solution worked for me, Thank you!

djflorio commented 2 years ago

@Methuselah96

Methuselah96 commented 2 years ago

@djflorio Thanks for the info. If you don't mind, can you try:

  1. Open the panel through the extensions toolbar.
  2. Right-click > Inspect to open the Chrome DevTools for the extension.
  3. Go to the Application tab.
  4. Expand IndexedDB, click on "localforage - chrome-extensions://lmhk...".
  5. Delete database.
  6. Close out Chrome and reopen and see if the bug persists.

I'm not confident this will fix the bug, just trying to narrow down the source of the issue.

djflorio commented 2 years ago

@Methuselah96 No problem. I performed those steps, and unfortunately there's no change.

Methuselah96 commented 2 years ago

Good news! I believe I've finally figured out the issue after being able to reproduce it on my end and do a bit of debugging. What I believe is happening is that it's persisting the selectedActionId between sessions. For example, let's say in one debugging session you select the 30th action (i.e., selectionActionId=29) in the list and then refresh your app. The Redux DevTools still thinks you have the 30th action selected, but since there are not 30 actions yet, it shows the state as undefined and doesn't track with the latest state.

One workaround would be to reset your selected action by:

  1. Clicking one of the actions to select it.
  2. Clicking on the action again which should deselect it and cause the Redux DevTools track the current state.

Alternatively, I think deleting the IndexedDB as described above should also work, but that would only be a temporary fix and selecting and deselecting an action should be easier.

Sorry this has taken so long to get sorted out. Let me know if you have any more questions or if the workaround isn't working for you. I'll try to get a proper fix out soon.

djflorio commented 2 years ago

@Methuselah96 No problem at all, thanks for digging in and finding the issue! Yep you're right; if I first select an action and then de-select it, the state tree remains up-to-date as more actions are fired.

For some reason I thought that it was supposed to actively highlight the latest action in the list, as well as show the most updated state tree, but this makes more sense; if you have an action highlighted, it makes sense for the UI to lock onto it.

PetarKirov commented 2 years ago

Clicking on the action again which should deselect it and cause the Redux DevTools track the current state.

That was the solution for me as well.

@Methuselah96 I (like I presume others experiencing this issue) didn't know that it was possible to deselect the selected action simply by clicking on it. What I tried (and what I thought was the most logical) was to click on the empty space below the last action, as in most UI list implementations that usually deselects (all) selected items.

Methuselah96 commented 2 years ago

Frankly, I didn't know either until looking at the source code since I didn't write the original code. Happy to accept PRs to improve the situation, I'm not sure how quickly I would get to it myself.

sehrish30 commented 2 years ago

Updating @redux-devtools/extension to latest version worked for me

banderberg commented 2 years ago

I don't know what they did but this big update essentially ruined what used to be a great tool..

Methuselah96 commented 2 years ago

@banderberg If you could provide specific feedback, that would be much more helpful than just saying that the "big update essentially ruined what used to be a great tool." The updates in 3.0 were for the most part cosmetic, so it doesn't seem like it should be too hard to make it a "great tool" again with the right kind of feedback.

Methuselah96 commented 2 years ago

It looks like there are still some cases where this is an issue even with the changes in the attached PR. Need to look into this again some more.

joemart commented 2 years ago

I'm also experiencing the same issues

ozkoidi commented 2 years ago

Similar issue here, the extension used to work some time ago. When I tried today (on Chrome 100.0.4896.88) I don't see any logs or actions and state is undefined.

image

image

rgutt commented 2 years ago

@ozkoidi I'm experience exactly the same problem. Redux is working properly but I also don' t see any action or states...

ozkoidi commented 2 years ago

@rgutt, is working again for me. The problem in my case was that on my Angular app the import of StoreDevtoolsModule.instrument() on ra-app.module.ts was moved up within the list. Once I put it back on the last position of the imports array of the NgModule (after the import of StoreModule.forRoot()) I was able to see the actions and the state again in the Redux Chrome extension.

philipjc commented 1 year ago

I've also experienced this today. For me, turning off the extension and closing the tab, starting a new tab, and turning the extension back on worked for me. I think it started when I started interacting with the Action tab, so I am going to leave it alone :)

update

So I now realize, if you interact with the timeline of the actions, as in selecting one and highlighting grey, that focus remains thus no longer auto updating and moving down. I noticed if you select it again the focus is removed and returns back to automated behavior. Give this a try folks maybe it will solve your issue.

asiby commented 9 months ago

I was about to suggest the same thing as @philipjc. It could help everyone if the state of the tool is prominently displayed using a ribbon of some sort. Or, there could be an obvious button named Follow Recent Action which will simply deselect any action.

olgazh565 commented 8 months ago

I had the same issue - the State tab did not show any state updates while the Action tab worked as expected. The solution turned out to be very simple for me - I clicked on the 'Log monitor' tab at the bottom panel of the tool and then back on the 'Inspector' tab, and the state was shown again on the State tab. Hope it might help to someone else as well.