在redux状态发生变化后,Observable没有更新

Question

我们使用的是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函数并避免嵌套obserables:

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))
    );

  }

结果完全一样.我错过了什么？

Answer 1

你在哪里更新this.route.paramMap可观察的？

我认为this.fortyPrinciplesUtilization$如果上面的可观察结果没有触发任何变化，那就不会改变。

我在代码中没有看到发生这种情况的地方。

也许我遗漏了一些部分。