* ngFor - обновлять dom при обновлении массива через ngrx

Question

Я использую * ngFor для отображения значений из массива:

[
  {
    id: 1,
    name: 'item1'
  },   
  {
    id: 2,
    name: 'item2'
  }
]

html:

<div *ngFor="let item of (items$ | async); trackBy: trackById;">
   // more html to display data
</div

ts:

items$: Observable<any>;
trackById = trackByProperty('id');

ngOnInit() {
  this.items$ = this.store.pipe(select(selectors.itemsSelector));
}

trackByProperty<T = any>(property: keyof T) {
  return (index: number, object: T) => object[property];
}

Работает как задумано, ngFor получает правильные и текущие значения в items$ array

Моя проблема в том, что когда я обновляю массив items$ с помощью ngrx, он, кажется, не перехватывает новый массив и не обновляетсяDOM

Херес поток данных с использованием ngrx

1. Диспетчеризация действия для редуктора, отправка нового объекта для добавления в массив.

     this.store.dispatch(new actions.UpdateArray(
         { id: 3, name: 'item3' }
       )
     );
   

2. Редуктор берет это действие и обновляет состояние хранилища с обновленным массивом (получает новый элемент и помещает его в массив).

   case actions.UPDATE_ARRAY: {
     const newItem = action.payload;
     const items = state.items;
     items.push(newItem);
     return {
       ...state,
       items
     };
   }
   

3. Обновления селектора.

Я могу подтвердить, что состояние корректно обновляется при выходе из action.payload в редукторе.

Кто-нибудь знает, почему я неполучить обновленный массив в *ngFor?

Забыл упомянуть, но я использую changeDetection: ChangeDetectionStrategy.OnPush как обнаружение изменений в моем компоненте

Спасибо!

ОБНОВЛЕНИЕ:

Я узналчто DOM на самом деле обновляется, когда вы нажимаете на компонент.Я хотел бы обновить его без необходимости

Answer 1

Это может произойти, потому что селекторы NgRx используют Memoization, которая иногда вызывает нежелательное поведение.

Изменение

case actions.UPDATE_ARRAY: {
  const newItem = action.payload;
  const items = state.items;
  items.push(newItem);
  return {
    ...state,
    items
  };
}

на

case actions.UPDATE_ARRAY: {
  const newItem = action.payload;
  const items = [...state.items, newItem]; // <-- creates new instance
  return {
    ...state,
    items
  };
}

должно решить проблему.