Обнаружение угловых изменений срабатывает только один раз при последовательных обновлениях Ngrx-store

В следующем сценарии обнаружение угловых изменений происходит не так, как я ожидаю. Я использую ngrx-store для хранения моего приложения.

  1. Изначально у меня состояние S1.
  2. Я запускаю действие А1. Редуктор, прослушивающий A1, обновляет состояние до S2. Эффект запускает действие A2.
  3. Прослушиватель А2 для редуктора обновляет состояние до S1.

В описанной выше ситуации есть два обновления состояния (S1 -> S2 -> S1). Однако в конце этой серии действий мои компоненты OnChange запускаются только один раз (S1 -> S1). Я использую стандартный Observable с асинхронным каналом и дочерним компонентом с @Input.

@Component({
    selector: 'app-parent-component',
    template: `<app-time-entry [timeEntry]="timeEntry$ | async"></app-time-entry>`
})
export class ParentComponent {
    timeEntry$: Observable<TimeEntryRow>;

    constructor(private store: Store<AppState>) {
        this.timeEntry$ = this.store.select(state => state.time.timeEntry);
    }
}

@Component({
    selector: 'app-time-entry',
    template: `{{timeEntry.hours}}`
})
export class TimeEntryComponent {
    @Input() timeEntry: TimeEntry;
}

Почему в этом случае обнаружение изменений происходит только один раз? Я проверил, что мое состояние корректно обновляется между каждым действием, так почему привязки обновляются только один раз? Я ожидал бы, что асинхронный канал будет дважды проходить вдоль измененного состояния, таким образом вызывая дочерние компоненты OnChange также дважды.

Обновить

Как предполагает Кевин ниже, добавление задержки в эффект заставляет оба OnChanges срабатывать, как и ожидалось. Это предполагает, что угловая "галочка" происходит после завершения обоих обновлений состояния.

1 ответ

Решение

Это может быть нормально. Ваше состояние изменялось дважды в течение одного и того же "тика" (т. Е. Вы отправляете действие А1, изменяющее состояние дважды: одно непосредственно от редуктора, обрабатывающего ваше действие, и второе время от эффекта, отправляющего второе действие).

Но обнаружение изменений запускается один раз. Таким образом, вы видите только последние изменения. Я полагаю, если бы ваш эффект отправлял действие в последний раз (возможно, с помощью оператора задержки), вы бы увидели, что OnChanges вызывается дважды. Я удивлен, что вы видите изменение S2->S1, хотя вместо S1->S1 (они имеют одинаковое содержимое, но являются разными объектами, так как состояние является неизменным), так что это может не быть тем, что происходит.

Трудно понять, происходит ли это, не видя весь код. Как выглядит ваш эффект? Это отправляет действие немедленно или выполняет какой-то AJAX-запрос и отправляет действие, когда оно получает результат?

Другие вопросы по тегам