Angular2 앱에서 상태 관리를 제공하기 위해 ngrx를 사용하고 있습니다. 두 개의 구성 요소가 있습니다 : "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
에 대한 로그 기록이 하나 더 표시 될 것으로 예상됩니다.
MenuComponent
과 다른 모듈에 있지만 모두 데이터를로드하는 작업을 전달하는 동일한 부모 모듈 내에 포함되어 있습니다.
[업데이트]
은 내가newReportHeaderCount
값을 증가하기 위해 추가 작업을했고,
MenuComponent
또는
ResultsPanelComponent
중 하나에서 파견 할 때, 상태는 정확하지만 새 값이 구독 모든 구성 요소에 푸시되지 않습니다 상태의 슬라이스
results
.
조치를 전달한 구성 요소에서만 새 상태 값만 표시됩니다. 나는 높은 차수의 구성 요소에 액션의 파견을 이동하면
, 나는 단지 내가 잘못된 일을 할 수 있는지에 MenuComponent
모든 아이디어의 상태 변화를 볼?