angular - 在 redux 中状态更改后，Observable 没有更新

问题描述

我们正在使用 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'（初始），即使 redux 中的状态是：

刷新后，当然一切都按预期工作。

我错过了什么？在应用程序的任何其他地方，我都在做同样的事情，并且一切都在更新。

更多信息

我还尝试重构 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))
    );

  }

结果是完全一样的。我错过了什么？

标签： angularasynchronousredux

angular - 在 redux 中状态更改后，Observable 没有更新

问题描述

解决方案

推荐阅读