angular - 即使实际值相同，状态更改时组件也会重新渲染

Question

我的 ngrx 状态包含一系列项目:

export interface MyState {
    myItems: ItemType[];
}

我有一个包含 ngFor 和异步管道的组件。

标记:

<app-my-item-details-card *ngFor="let myItem of myItems$ | async"> </app-my-item-details-card>

选择器:

this.myItems$ = createSelector(getMyState, state => state.myItems);

<小时/>

在 AppMyItemDetailsCardComponent 内部，我有一个 bool 标志 displayDetails:boolean 和用于切换 bool 标志的按钮 button (click)="displayDetails = !displayDetails" 。在详细信息面板上，我有一些输入，显示来自传递给组件的 MyItem 实例的一些数据。用户可以修改这些 html 元素并单击保存按钮，该按钮将触发 MyItemUpdateAction 操作。在商店 reducer 中我做了这样的事情:

const myItemToModifyIndex = state.myItems.findIndex(...predicated based on the passed a ction...)
// cloning the item that I need to modify.
const myItemClone = [...state.myItems[myItemToModifyIndex]];
// modifying properties on the cloned item using data from the action
myItemClone.interestingProperty = action.newValueFromUser;
// cloning the array of items from the state.
const myItemsArrayClone = [...state.myItems];
// setting new item in the cloned array.
myItemsArrayClone[myItemToModifyIndex] = myItemClone;
// return of new state.
return { myItems: myItemsArrayClone }

<小时/>

问题:

因为正如您从 reducer 中看到的，我已经修改了状态，并且实质上创建了 myItems 数组的新实例以及我已修改的项目的副本，Angular async 管道对商店中的更改使用react并重新呈现我的组件列表。它本身会重新渲染 AppMyItemDetailsCardComponent 的所有实例，并导致显示组件详细信息的标志为 false，并且 UI 更改和详细信息面板被隐藏。

问题:

1) 这种模式是否有意义并且适合 NGRX 的工作方式？ (我是 Angular 中 Redux 的新手)。

2) 我可以通过保留商店内显示详细信息面板的标志来解决此问题。基本上，我不会切换 button (click)="displayDetails = !displayDetails" bool 标志，而是调度一个操作来更改 MyItem 本身实例上的标志，从而驱动详细信息的显示控制板。这可以算是一个好的解决方案吗？

Answer 1

redux、ngrx 和状态处理都是关于引用的。

如果您创建一个新的数组引用，Angular 会认为它是一个新列表并重新渲染所有内容。

但是，如果您更改数组中特定项目的引用，Angular 只会推送新的 [item]="myItem"并导致单个我的应用项目卡更新。

这是一个非常仔细地创建新状态树的问题，仅更新必要的内容。

我还将 displayDetails 放入项目中，这样当您克隆状态更改时它将保持同步并且不会被覆盖。