The Observable is not updating after state change in redux

Question

We are using Angular 6 and Redux.

The initialization of one of the components looks like follows:

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

The main thing to pay attention to is the initialization of fortyPrinciplesUtilization$. In the same component, there are any functions that call projectToolUtilizationActions functions which subsequently causing fortyPrinciplesUtilization$ to be updated in Redux.

Here is one of the functions that is built to set the status to 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);
      }
    });
  }

As a result, the state is updated as expected. Which is great!

However, for some reason, when I am the fortyPrinciplesUtilization$ in the template:

<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>
....

Where isUtilizationCompleted is:

isUtilizationCompleted = (util: FortyPrinciplesUtilization) => util.status === ToolUtilizationStatus.FINISHED;

The status is still 'IN_PROGRESS' (initial), even though the state in redux is:

After refresh, everything is, of course, working as expected.

What am I missing? In any other places in the app I am doing the same thing, and everything is getting updated.

Some More Info

I also tried refactoring the onInit function and avoid having nested 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))
    );

  }

The result is exactly the same. What am I missing?

Answer 1

Where are you updating this.route.paramMap observable?

I think that this.fortyPrinciplesUtilization$ couldn't change if the observable above does not trigger any change.

I don't see in the code someplace where this happens.

Maybe I am missing some part.