javascript - 避免重新渲染子组件 NgRx - Firestore

Question

我正在寻找一种方法来解决我的模型的 1 个属性从 firestore 更新，但所有细节(子)组件都被重新渲染的情况。

例如，我的模型有作者、标题、图片和 likesCount。当 NumberOfLikes 更新时，Firestore 发送修改后的操作，其中的有效负载通过我在 ngrx 中的 ItemReducer:

   case actions.MODIFIED:
        return itemAdapter.updateOne({
            id: action.payload.url,
            changes: action.payload
        }, state);

这只会更新我的项目数组中的一个对象，但是当针对该特定项目更新子组件时，它会重新呈现所有 4 个属性，而不仅仅是 likesCount，这会导致令人讨厌的闪烁.

我认为我在父组件和子组件中实现的 ChangeDetectionStrategy 对此没有帮助。想知道是否有办法让子组件只更新 likesCount 属性。

据我所知，ngrx 正在传递一个新的引用，我使用的异步管道也起到了重新渲染子组件的作用。

感谢您抽出宝贵时间。将不胜感激任何建议。

容器组件:

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Item } from './../../../models/item';

@Component({
    selector: 'app-specials',
    styleUrls: ['specials-list.component.scss'],
    template: `
<div *ngIf="items$ | async; let items; else noItems">
  <app-item-detail
    *ngFor="let item of items"
    [detail]="item">
  </app-item-detail>
</div>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
...
ngOnInit() {
    this.items$ = this.store.select(fromItem.selectAll);
}
...

子组件

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
...
@Input()
detail: Item;

Answer 1

最后只是将 likesCount 提取到服务中。一开始就应该这样设计。