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

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 内部，我有一个布尔标志displayDetails:boolean和按钮按钮 (click)="displayDetails = !displayDetails" 切换布尔标志。在详细信息面板上，我有一些输入显示来自传递给组件的MyItem实例的一些数据。用户可以修改这些 html 元素并单击“保存”按钮，该按钮会触发MyItemUpdateAction操作。在 store 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 异步管道会对存储中的更改做出反应并重新呈现我的组件列表。这本身会重新呈现AppMyItemDetailsCardComponent 的所有实例，并导致显示组件详细信息的标志为 false，并且 UI 更改和详细信息面板被隐藏。

问题：

1) 这种模式是否有意义并适合 NGRX 的工作方式？（我是 angular 的 redux 新手）。

2) 我可以通过在商店内保留显示详细信息面板的标志来解决这个问题。基本上不是切换按钮 (click)="displayDetails = !displayDetails"一个布尔标志，我会调度一个动作来改变 MyItem 本身实例上的一个标志，这将驱动细节面板的显示。这可以被认为是一个很好的解决方案吗？

Answer 1

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

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

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

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

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