New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"No store found" when opening a new Chrome Developer Tools window, but it works from the main toolbar #508

Closed
jongunter opened this Issue Oct 19, 2017 · 14 comments

Comments

Projects
None yet
7 participants
@jongunter
Copy link

jongunter commented Oct 19, 2017

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X ] Bug report
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

When refresh my app and then open a separate "Chrome Developer Tools" window and select the "Redux" tab, it says "No Store found". However, if I click the Redux DevTools icon next to Chrome's address bar, I will see the DevTools and they work great. Also, if I have Chrome Developer Tools already open and refresh the page, the Redux Devtools load just fine.

Expected behavior:

The Redux DevTools should work in the Developer Tools window every time.

Minimal reproduction of the problem with instructions:

  1. Close Chrome
  2. Open the SPA in Chrome
  3. Open Chrome Developer Tools
  4. Click the "Redux" Tab and see "No Store Found"
  5. Click the Redux toolbar icon and the Redux DevTools work
  6. Refresh the page with Chrome Developer Tools
  7. Redux DevTools loads properly in the Chrome Developer Tools window

Version of affected browser(s),operating system(s), npm, node and ngrx:

Occurs in Windows and MacOS X
Chrome Version 61.0.3163.100 (Official Build) (64-bit)
@ngrx/effects 4.0.5
@ngrx/store 4.0.3
@ngrx/store-devtools@ 4.0.0

@jongunter

This comment has been minimized.

Copy link
Author

jongunter commented Oct 19, 2017

I should mention I'm using 2.15.1 of the Chrome Extension

@xipheCom

This comment has been minimized.

Copy link
Contributor

xipheCom commented Oct 20, 2017

Same in Firefox. I guess the redux tab does not connect, if the page has already loaded. For perfomance reasons it is not a good idea to listen all the time at different places. I think it is a feature - not a bug. (?)

@jongunter

This comment has been minimized.

Copy link
Author

jongunter commented Oct 20, 2017

It doesn't seem to be a problem with other redux devtools integration libraries, though? Bitbucket exposes their redux implementation to DevTools, and you can't replicate this issue on their site.

@phillipzada

This comment has been minimized.

Copy link
Contributor

phillipzada commented Oct 23, 2017

Hi @jongunter, this kinda looks like a bug with the extension. If you have the Redux tab open in the dev tools and perform something that fires an action the tool kicks in. After that on page refresh's it works fine too. I can also confirm it works if you have the dev tools open before loading the SPA.

output

@jongunter

This comment has been minimized.

Copy link
Author

jongunter commented Oct 23, 2017

I just tried and you're right about that. Firing off any sort of action will cause the Redux DevTools to render. However, I could have sworn this only happens with the ngrx DevTools extensions, that's why I filed the issue here. Let me go back and check some of my other Redux projects (that don't use ngrx) to see if I can replicate the issue there.

@jongunter

This comment has been minimized.

Copy link
Author

jongunter commented Oct 24, 2017

After some experimenting, I've found that this

Firing off any sort of action will cause the Redux DevTools to render.

isn't always true. At times it does work. But other times, I can dispatch actions 'till the cows come home and Redux DevTools will not appear. Seems to be occurring for both Chrome on Mac and Windows.

@phillipzada

This comment has been minimized.

Copy link
Contributor

phillipzada commented Oct 26, 2017

Hmm... interesting can you provide the code repo you are using please and exact steps to reproduce.
And when you say Redux projects that don't use NGRX, then the issue would be with the platform that you are using not this one? unless i've missed something.

@jongunter

This comment has been minimized.

Copy link
Author

jongunter commented Oct 26, 2017

Sure. I'll see if I can get a repro uploaded sometime in the next week.

Let me clarify on that second point. I've only noticed this issue while working with ngrx, but I have worked on non-Angular projects that use Redux Devtools in the past and I don't recall ever experiencing this issue with those projects. However, maybe what I'm experiencing is a bug in the Redux Devtools (not the ngrx adapter for Redux Devtools) that has emerged since I last worked with a non-Angular project in Redux Devtools. So, I will try to replicate this issue with a non-ngrx redux project, to make doubly sure this really an issue with the ngrx adapter. If I can replicate the issue in a non-ngrx project, I will close this report and file a new one with the Redux Devtools Chrome Extension.

@jongunter

This comment has been minimized.

Copy link
Author

jongunter commented Oct 31, 2017

I tried to reproduce this issue on an AngularJS app that uses ngRedux and hooks into the Redux DevTools extension natively (see configuration below). This issue DID NOT occur.

angular.module('app').config(function($ngReduxProvider){

    var middleware = [window.__REDUX_DEVTOOLS_EXTENSION__()]

    $ngReduxProvider.createStoreWith(rootReducer, [], middleware)
})

I tried it in the same browser 10 seconds later with my Angular 4 app and the issue DID occur. Configured as shown:

imports: [
    BrowserModule,
    FormsModule,
    HttpModule, // <= the old HTTP module
    HttpClientModule, // <= the new HTTP module
    AppRoutingModule,
    SharedModule,
    CoreModule,
    ToastrModule.forRoot(),
    StoreModule.forRoot(rootReducer, {metaReducers}),
    EffectsModule.forRoot([]),
    StoreDevtoolsModule.instrument(),
  ],

In summary, this issue seems to be related to ngrx/store-devtools and not the Redux DevTools Chome extension itself.
I will try to get a repo that reproduces the issue for you soon. Thanks for your patience.

@Arhane

This comment has been minimized.

Copy link

Arhane commented Feb 7, 2018

I have the same problem, but I don't use the ngrx/store-devtools. I use plain devToolsExtension.

But in my situation the issue is worse. Even if I try to refresh a page, the chances that devToolsExtension could be broken is about 40-50%

I will try to reproduce the problem and write more details later

@nasreddineskandrani

This comment has been minimized.

Copy link
Contributor

nasreddineskandrani commented May 5, 2018

PR opened for a fix. Can you guys give it a try? (tested with example app ngrx -> all fine)

@realiceman

This comment has been minimized.

Copy link

realiceman commented Dec 31, 2018

Hi everyone!! Actually there is no bug. Most of the time the "no store...." issue, it is because "StoreDevtoolsModule.instrument()" is place before the "StoreModule" in the imports section of the app.module.ts file ==> so the devtool is loaded before the store, so it just can't watch the store...
How to fix ? Easy peasy... just place " StoreDevtoolsModule.instrument()" after the StoreModule.
Hope it helps someone someday :)

@nasreddineskandrani

This comment has been minimized.

Copy link
Contributor

nasreddineskandrani commented Dec 31, 2018

Actually there is no bug

Wrong statement. A bug was describe on top. It was present in v5 and less. It's fixed in v6 and more.
As you can see in @jongunter comment his StoreDevtoolsModule was after the StoreModule and he was reporting a problem.

I tried to change the order in a v6 ngrx project and their is no problem anymore having StoreDevtoolsModule.instrument() before.

@realiceman
which ngrx version are you using?

you were right the order is important i just tried it in v7. But if you use the schematics you should not face this issue. humm for now i guess we can just respect the order. Good catch.

@realiceman

This comment has been minimized.

Copy link

realiceman commented Dec 31, 2018

Actually there is no bug

Wrong statement. A bug was describe on top. It was present in v5 and less. It's fixed in v6 and more.
As you can see in @jongunter comment his StoreDevtoolsModule was after the StoreModule and he was reporting a problem.

I tried to change the order in a v6 ngrx project and their is no problem anymore having StoreDevtoolsModule.instrument() before.

@realiceman
which ngrx version are you using?

you were right the order is important i just tried it in v7. But if you use the schematics you should not face this issue. humm for now i guess we can just respect the order. Good catch.

Iam using the version 7.
Ok for the bug in the previous version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment