zalmoxisus/redux-devtools-extension

React + Redux + Typescript Chrome Extension Popup Script - Redux Devtools Shows "No Store Found" (Possible Solution?)

lbragile opened this issue · 5 comments

lbragile commented

Hi @zalmoxisus,

I asked the above question on StackOverflow

One of the responses suggested that when webpack applying 'uglification', then window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ in this code breaks.

Instead, using window["__REDUX_DEVTOOLS_EXTENSION_COMPOSE__"] should solve this issue.

Once I applied the above, I could finally see the store from the redux tab in the devtools window.
However, my actions are still not being dispatched.

Is this due to my application being a chrome extension popup script?
Would using remote-redux-devtool fix the issue here?

lbragile commented

Seems like it was a false positive (I had an existing tab from localhost:3000 that was created by react-scripts which caused the store to appear to work). So unfortunately, the above "solution" does not seem to work 😥

Would appreciate any feedback that you could provide.

lbragile commented

I figured out a solution, thanks to a kind StackOverflow user in my original post.

Solution

A server needs to be running and remote redux devtools should be used rather than redux devtools extension.
I have a windows machine and installed v0.5.16

The best approach for running the server would be the following:

  1. Install remotedev-server
  2. Add "remotedev": "remotedev --hostname=localhost --port=8080" npm script
  3. Run the above script to start a server (!important)
  4. Right click on popup, Redux DevTools > Open Remote DevTools (not inspect)
  5. Settings > Use Custom Local Server > Type in the hostname and port specified in the npm script.

As proof, here is the working interface:
image

Would be great if the documentation could indicate this for future users as I spent a lot of time being confused and not being able to simply set up the extension.

  • ❤️1
spirobel commented

@lbragile did you get the actionCreators and tracing to work? It didn't work for me: reduxjs/redux-toolkit#1815

lbragile commented

@spirobel Nope, I have the same issue as you described in your ticket - I just see a blank page in the trace tab when working with the remote redux devtools. However, on another project of mine, I can see the trace for the regular redux devtools. Thus, this is likely a bug with the remote version.

  • 👍1
spirobel commented

true. So it is most likely a problem in the remote version. It seems like it is requesting the sources, but cant get them: https://imgur.com/a/BYzR0Nn

  • 👍1