search

zalmoxisus / redux-devtools-extension

Redux DevTools extension.
MIT License
13.5k stars 1.01k forks source link

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

Open lbragile opened 2 years ago

lbragile commented 2 years ago

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 2 years ago

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 2 years ago

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.

spirobel commented 2 years ago

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

lbragile commented 2 years ago

@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.

spirobel commented 2 years ago

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