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

【问题标题】：Components re-render when state changes even if the actual values are the same即使实际值相同，组件也会在状态更改时重新渲染
【发布时间】：2018-08-30 20:21:24
【问题描述】：

我的 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 和按钮 button (click)="displayDetails = !displayDetails" 来切换布尔标志。在详细信息面板上，我有一些输入显示来自传递给组件的 MyItem 实例的一些数据。用户可以修改这些 html 元素并单击 Save 按钮，该按钮会触发一个动作 MyItemUpdateAction。在商店减速器中，我做了这样的事情：

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 管道对存储中的更改做出反应并重新呈现我的组件列表。这本身会重新渲染 AppMyItemDetailsCardComponent 的所有实例，并导致显示组件详细信息的标志为 false，并且 UI 更改和详细信息面板被隐藏。

问题：

1) 这种模式是否有意义并符合 NGRX 的处理方式？（我是角度方面的 redux 新手）。

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

【问题讨论】：

标签： angular rxjs ngrx

【解决方案1】：

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

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

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

这是一个非常小心地创建新状态树的问题，只更新必要的部分。

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

【讨论】：