Мы используем Angular 6 и Redux.
Инициализация одного из компонентов выглядит следующим образом:
ngOnInit() {
this.parameterActions.loadParameters();
this.principleActions.loadPrinciples();
this.domainPrincipleActions.loadDomainPrinciples();
this.domainActions.loadDomains();
this.matrixElementActions.loadMatrixElements();
const stepParam = +this.route.snapshot.queryParamMap.get('step');
this.currentStepIndex = stepParam ? stepParam - 1 : 0;
this.fortyPrinciplesUtilization$ = this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.projectId = +params.get('id');
this.utilizationId = +params.get('utilizationId');
this.projectToolUtilizationActions.loadProjectTools(this.projectId);
return this.store.select<FortyPrinciplesUtilization>(
['projectToolsMap', this.projectId, 'tools', this.utilizationId]
).pipe(
tap(utilization => utilization && this.buildFormGroup(utilization))
);
})
);
}
Главное, на что следует обратить внимание, это инициализация fortyPrinciplesUtilization$
. В том же компоненте есть все функции, которые вызывают функции projectToolUtilizationActions
, что впоследствии приводит к обновлению fortyPrinciplesUtilization$
в Redux.
Вот одна из функций, созданных для установки статуса на complete
:
confirmComplete() {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
data: {
confirmTitle: 'Please, confirm',
confirmContent: 'You are about mark this tool usage as complete. <br>' +
'Once completed, all the data will not be editable anymore.<br>' +
'Do you want to continue?',
okButtonText: 'Complete'
}
});
dialogRef.afterClosed().subscribe(result => {
if (result === ConfirmResponse.YES) {
this.projectToolUtilizationActions.completeToolUtilization(this.projectId, this.utilizationId);
}
});
}
В результате состояние обновляется, как ожидается. Что здорово!
Однако по какой-то причине, когда я являюсь fortyPrinciplesUtilization$
в шаблоне:
<div class="forty-principles-utilization-container"
*ngIf="fortyPrinciplesUtilization$ | async as fortyPrinciplesUtilization">
...
<button mat-raised-button
type="button"
color="accent"
class="step-button"
(click)="confirmComplete()"
[disabled]="isUtilizationCompleted(fortyPrinciplesUtilization)">
Complete
</button>
....
Где isUtilizationCompleted
:
isUtilizationCompleted = (util: FortyPrinciplesUtilization) => util.status === ToolUtilizationStatus.FINISHED;
Статус по-прежнему «IN_PROGRESS» (начальный), даже если состояние в редуксе:
После обновления все, конечно, работает как положено.
Что мне не хватает? В других местах приложения я делаю то же самое, и все обновляется.
Немного больше информации
Я также попытался реорганизовать функцию onInit и избежать вложенных объектов:
ngOnInit() {
this.parameterActions.loadParameters();
this.principleActions.loadPrinciples();
this.domainPrincipleActions.loadDomainPrinciples();
this.domainActions.loadDomains();
this.matrixElementActions.loadMatrixElements();
const stepParam = +this.route.snapshot.queryParamMap.get('step');
this.currentStepIndex = stepParam ? stepParam - 1 : 0;
this.projectId = +this.route.snapshot.paramMap.get('id');
this.utilizationId = +this.route.snapshot.paramMap.get('utilizationId');
this.projectToolUtilizationActions.loadProjectTools(this.projectId);
this.fortyPrinciplesUtilization$ = this.store.select<FortyPrinciplesUtilization>(
['projectToolsMap', this.projectId, 'tools', this.utilizationId]
).pipe(
tap(utilization => utilization && this.buildFormGroup(utilization))
);
}
Результат точно такой же.
Чего мне не хватает?