The store state only shows initial state

[hongbo-miao]

Originally asked on Stack Overflow.

import { Component, ChangeDetectorRef } from '@angular/core';
import { Store } from '@ngrx/store';

@Component({
  selector: 'test-component',
  template: `
    <button (click)="onChangeDetection()">Change Detection</button>
    <button (click)="onDispatch()">Dispatch</button>
    {{_store|async|json}}
  `
})
export class TestComponent {
  constructor(private _store: Store<AppState>,  private _cdRef: ChangeDetectorRef) {}

  onChangeDetection() {
    this._cdRef.detectChanges();
  }

  onDispatch() {
    this._store.dispatch({ type: 'NOT_EXIST' });
  }
}

The code is quite simple, I just created a test page, when I go to this page, {{_store|async|json}} only shows initial state, it does not show any other state added by user after running this app.

If I click Change Detection button to manually run change detection, still cannot see states created by users.
If I click Dispatch button, even the Action is NOT_EXIST, but then I can see all states.

Note in Chrome Extention Redux Tools, the state tree shows correct all the time.

[hongbo-miao]

this._store.dispatch({ type: 'NOT_EXIST' }) can trigger to load all states.
And now I found that if I click Commit button on the dev tool, it will also load all states.

I feel the store just somehow stuck there, need something to trigger it.

My first impression is that it is related with change detection. However, I tried these to manually run change detection, but just does not work..

ChangeDetectorRef's  detectChanges() or markForCheck()
ApplicationRef's  tick()

[qdouble]

After updating to angular builds, I'm experiencing a similar issue of the state not updating from init on browser refresh until I either navigate, click commit or do some other action. Not sure at all what is causing it.... worked fine for me on RC4 though, but it is creeping up using angular-builds

[dballance]

Are either of you using ChangeDetectionStrategy.OnPush in your root app component?

[hongbo-miao]

@dballance no, I am NOT using it in the root component, and also NOT in second level (page level) component (container).

[qdouble]

@dballance nope, I'm only using OnPush for form inputs

[robwormald]

we need a plunker to reproduce this please

[qdouble]

@robwormald Would be difficult to setup all the parts in plunker, but I created a minimal repo to show the issue.

1. After installing, do npm start, go to localhost:3001 and then click on Test Request link and see resolved data.
2. Refresh browser and see data not being shown until navigation or clicking button to trigger change detection.
3. If you uncomment out same stuff from main app component, resolved data will show immediately.

https://github.com/qdouble/ngrx-init-issue

[qdouble]

@robwormald I also just created an extra branch where the only difference is using rc4 instead of angular-builds and it works as expected: https://github.com/qdouble/ngrx-init-issue/tree/works-with-rc4

So there's something that happened between rc4 and the current builds which breaks it for me.

[robwormald]

@qdouble please provide a minimal reproduction in a plunker - this will help both you and I isolate the issue down to the root cause, rather than trying to debug an app and build system. your package has two routers, effects, store, router-store, etc etc etc. I'd planned to look at this on my flight today, where plnker works fine, but npm installing a ton of deps isn't possible, so it'll have to wait.

[hongbo-miao]

@robwormald

I created another issue in angular2-meteor here. The codes work well in this plunker, but do not work well when I use angular2-meteor on my local machine. So maybe related with angular2-meteor(?).

On my local machine, it shows this first

Once I click Dispatch button, then it shows all states like below:

But in plunker it shows whole states immediately, which works well.

[qdouble]

@robwormald After trying to recreate the bug for plunker, I think it's specifically a bug with the router-builds and not ngrx. I filed a bug here, you can take a look: angular/angular#10079

[barbatus]

Since AsyncPipe only subscribes to the observable (it can't tap into to get any initial value), it needs additional change detection cycle to recognize changes if the user effects were applied before the components were rendered. I think this's the case here.

[qdouble]

This issue in the incremental builds was fixed with this commit: angular/angular@a46437c