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

[jongunter]

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]

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

[xipheCom]

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]

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]

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.

[jongunter]

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]

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]

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]

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]

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]

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]

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

[realiceman]

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]

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]

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.

[Pranav50]

Try removing Redux Chrome Developer Tool and reinstall it and you will get the tool again

[andrsbrbs]

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 :)

This should really be upvoted more. Wasted like 4 hours refactoring and writing my app from zero again, until I found your answer.