0
ngrxを使用してAngular2アプリで状態管理を提供しています。私は2つのコンポーネントを持っています： "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のためのもう1つのログステートメントを見ることが期待されます。
MenuComponentとは異なるモジュールにありますが、両方ともデータをロードするアクションを送信するのと同じ親モジュール内に含まれています。
[更新]
IはnewReportHeaderCount値をインクリメントするための追加のアクションを行い、MenuComponent又はResultsPanelComponentいずれかからディスパッチされたとき、状態が適切であるが、新しい値が購読すべてのコンポーネントに押し込まれていませんresults状態のスライスに変換します。
私は、アクションをディスパッチしたコンポーネント内に新しい状態値しか表示しません。
私はより高次のコンポーネントにアクションの派遣を移動した場合、私は私が間違っていることができるものでMenuComponent
任意のアイデアの状態変化を参照してください？