组件中的订阅未获取状态更改

Question

我正在使用 ngrx 在 Angular2 应用程序中提供状态管理。我有两个组件：MenuComponent 和 ResultsPanelComponent，它们订阅由同一状态片段提供的不同值。

我看到的问题是，当我记录状态值时，“菜单”组件响应状态更改，但“结果”组件不响应。

我正在调度操作以在高阶组件中填充状态。

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();
  }
}

当我运行我的应用程序时，我看到：

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}

登录到控制台。当状态更改时，我希望看到 ResultsPanelComponent state 的另一个日志语句。

ResultsPanelComponent 与 MenuComponent 在不同的模块中，但两者都包含在同一个父模块中，该父模块调度加载数据的操作。

[更新]

我做了一个额外的操作来增加 newReportHeaderCount 值，当从 MenuComponent 或 ResultsPanelComponent 发送时，状态是正确的，但新值没有被推送到订阅 results 状态切片的所有组件。

我只在发送动作的组件中看到新的状态值。

如果我将动作的分派移动到高阶组件，我只会在 MenuComponent

中看到状态变化

关于我可能做错了什么有什么想法吗？

Answer 1

我在一个模块中加载我的 EffectListener 和 provideStore，该模块在其他几个模块之间共享。

我将它们移到了我的根 AppModule 并且一切正常。

组件中的订阅未获取状态更改

State change not picked up by subscription in component

state

ngrx

angular