State change not picked up by subscription in component

Question

I'm using ngrx to provide state management in an Angular2 app. I have two components: MenuComponent and ResultsPanelComponent that subscribe to different values provided by the same slice of state.

The problem I'm seeing is that the "menu" component responds to the state change but the "results" component does not when I log the value of the state.

I'm dispatching the action to populate the state in a higher order component.

menu.component.ts

export class MenuComponent implements OnInit, OnDestroy {
  private sub: Subscription;
  newReportHeaderCount: number;

  constructor(private store: Store<AppState>) {}

  ngOnInit(): void {
    this.sub = this.store.select('results').subscribe((state) => {
      console.log('MenuComponent state: ', state);
      this.newReportHeaderCount = state['newReportHeaderCount'];
    });
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }
}

results.component.ts

export class ResultsPanelComponent implements OnInit, OnDestroy {
  private sub: Subscription;
  reportHeaderSummary: ReportHeaderSummary[] = [];

  constructor(private store: Store<AppState>) {}

  ngOnInit(): void {
    this.sub = this.store.select('results').subscribe((state) => {
      console.log('ResultsPanelComponent state: ', state);
      this.reportHeaderSummary = state['reportHeaderSummary'];
    });
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }
}

When I run my app, I see:

MenuComponent state:  Object {reportHeaderSummary: Array[0], reportHeaders: Array[0], newReportHeaderCount: 0, loading: false}
ResultsPanelComponent state:  Object {reportHeaderSummary: Array[0], reportHeaders: Array[0], newReportHeaderCount: 0, loading: false}
MenuComponent state:  Object {reportHeaderSummary: Array[4], reportHeaders: Array[0], newReportHeaderCount: 3, loading: false}

logged to the console. I would expect to see one more log statement for ResultsPanelComponent state when the state was changed.

The ResultsPanelComponent is in a different module than MenuComponent, but both are contained within the same parent module that dispatches the action to load data.

[Update]

I made an additional action to increment the newReportHeaderCount value, and when dispatched from either MenuComponent or ResultsPanelComponent, the state is correct, but the new values are not pushed to all components that subscribe to the results slice of state.

I only see the new state value in the component that dispatched the action.

If I move the dispatch of the action to the higher order component, I only see the state change in MenuComponent

Any ideas on what I could be doing wrong?

Brandon Brandon · Accepted Answer · 2016-12-16T16:57:49

I was loading my EffectListener and provideStore in a module that was shared across several other modules.

I moved those to my root AppModule and everything works as expected.

State change not picked up by subscription in component

1 Answers