The Observable не обновляется после изменения состояния в Redux - PullRequest
0 голосов
/ 16 ноября 2018

Мы используем 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» (начальный), даже если состояние в редуксе:

enter image description here

После обновления все, конечно, работает как положено.

Что мне не хватает? В других местах приложения я делаю то же самое, и все обновляется.

Немного больше информации

Я также попытался реорганизовать функцию 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))
    );

  }

Результат точно такой же. Чего мне не хватает?

1 Ответ

0 голосов
/ 21 ноября 2018

Где вы обновляете this.route.paramMap наблюдаемый?

Я думаю, что this.fortyPrinciplesUtilization$ не может измениться, если наблюдаемое выше не вызывает никаких изменений.

Я не вижу вкод где-нибудь, где это происходит.

Может быть, мне не хватает какой-то части.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...