Change Detection fired if Redux Devtools listens a store.dispatch()

[ShadowManu]

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?

If you call store.dispatch outside of an Angular Zone, but have the Redux Devtools extension active and the store-devtools configured, Angular will run a Change Detection cycle.

I'm not too sure of who should I ask about this, since its a Redux extension event listener distracting Angular to do CD. But I'll start here :)

Expected behavior:

To not run a Change Detection cycle, as when store-devtools (or Redux Devtools) is not configured.

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

Basically decent latests: Linux x64 (Ubuntu), npm 5.3.0, node 8.6.0, @ngrx/store 4.0.3, @ngrx/store/devtools 4.0.0.

[dipiash]

I have a same problem(

@NgModule({
    declarations: [
        ...,
        PageComponent,
    ],
    imports: [
        // Modules
        ...,
        PageModule,
        ...,
        // Router
        RouterModule.forRoot(routeConfig),
        BrowserModule,
        // Store
        StoreModule.forRoot(reducers, {metaReducers}),
        EffectsModule.forRoot([..., PageEffects, ...]),
        // StoreDevtoolsModule.instrument(),
        HttpClientModule,
    ],
    providers: [{
        provide: HTTP_INTERCEPTORS,
        useClass: UnAuthorisedHttpInterceptor,
        multi: true,
    }],
    bootstrap: [AppComponent],
})
export class AppModule {
}

If StoreDevtoolsModule.instrument() is disabled and Redux Dev Tools in browser is disabled, changes in store not detect after first loading page (F5).

<div class="info">
        <div class="title">{{(current | async)?.title}}</div>
        <div class="group">{{(current | async)?.title}}</div>
</div>

current - not update after changes.

If I add to Component

constructor(public store: Store<any>, private changeDetector: ChangeDetectorRef) {
    }

and

_dataInitializer() {
        // Subscribe on player
        this.storeData.subscribe(data => {
            if (data.current !== null) {

                if (!this.isCurrentInitOnLoadPage) {
                    this.isCurrentInitOnLoadPage = true;
                    this.createObject(data.current);

                    this.isSetFirstChange = true;
                } else {
                    this.dataEventEmitter.emit({type: `start:1`, id: 1});

                    this.isSetFirstChange = false;
                }

                // For first initialize
                if (this.isSetFirstChange) {
                    this.changeDetector.detectChanges();
                }
            }
        });
    }

detect changes is worked. Current is updated.

[ghost]

We had exactly the same issue, the problem was in our code. There is a callback, which is coming from a 3rd party library. In this callback we call the "store.dispatch" function. No change detection happens. (without the redux plugin). We fixed our code to make sure the "store.dispatch" in called within the ngZone:

constructor(..., private ngZone: NgZone) {
}
...
this.ngZone.run(() => {
    this.store.dispatch(action);
});

This example explains it good:

this.ngZone.runOutsideAngular(() => {
    setTimeout(() => {
        // Changes here will not propagate into your view.
        this.ngZone.run(() => {
            // Run inside the ngZone to trigger change detection.
        });
        }, REALLY_LONG_DELAY);
});

[TheILPlace]

hi, this thing also happened to me, with a 3rd party javascript library.
the thing is, because this is not predicted, you will not encounter this during your development, but only in other environments (qa, pre-prod) etc IF the users of that platform do NOT have the devtools enabled (which we usually DO enable in QA for example in order to capture the state in case of errors)

[manklu]

Simple Reproduction. Try it with and without Redux Dev Tools and watch the counter and the console.
https://stackblitz.com/edit/ngrx-seed-agnv6j?file=src/app/app.component.ts

Tested with Chrome 71.0.3578.98 and Redux DevTools 2.17.0

[craiggoldstone]

This caused some false-positives in our application recently, where we had forgotten to call cd.detectChanges() the view should not have been updated; but because of this bug it worked fine all during development