у нас есть следующее решение:
У нас есть действия:
@Action(LoadSummary)
LoadSummary({ patchState, dispatch }: StateContext<StateModel>, { id }: LoadSummary) {
this.detailService.getSummary(id).subscribe((response) => {
patchState({
summary: response?.data
});
// dispatch success action
dispatch(new LoadSummarySuccess());
});
}
DetailService вызывает API для получения данных.
Модуль маршрутизации:
const routes: Routes = [
{
path: '',
component: DashboardComponent,
children: [
{ path: '' },
{
path: 'overview',
component: OverviewComponent,
},
]
},
]
Шаблон DashboardComponent содержит <router-outlet>
.
DashboardComponent реализует ngOnInit:
ngOnInit() {
// subscribe to summary changes
this.actions$
.pipe(ofActionSuccessful(LoadSummarySuccess))
.pipe(takeUntil(this.destroySubject$))
.subscribe(() => {
// get state snapshot here
const summary = this.store.selectSnapshot(DetailState.summary);
// update view
this.updateDashboard(summary);
});
// subscribe to navigation end
this.navigationService
.getNavigationEndEvents()
.pipe(takeUntil(this.destroySubject$))
.subscribe(() => this.onNavigationEnd());
}
Метод onNavigationEnd () отправляет состояние:
private onNavigationEnd(): void {
// load summary and store response
this.store.dispatch(new LoadSummary(this.id));
}
OverviewComponent реализует ngOnInit:
ngOnInit() {
this.actions$.pipe(ofActionSuccessful(LoadSummarySuccess),
takeUntil(this.destroySubject$)).subscribe(() => {
this.getData();
});
}
Метод getData () считывает снимок состояния.
getData() {
const summary = this.store.selectSnapshot(DetailState.summary);
}
Вопросы: Есть ли условие гонки в код? Есть ли вероятность, что панель мониторинга отправит успешное действие до того, как компонент Overview подпишется на ofActionSuccesful, поэтому метод getData никогда не будет выполняться?
Есть ли лучший подход?
Есть идеи? Большое спасибо.