时间戳

首页 > 解决方案 > 即使实际值相同，组件也会在状态更改时重新渲染

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

问题描述

我的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 元素并单击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 }

问题：

因为正如您从减速器中看到的那样，我已经修改了状态并基本上创建了myItems数组的新实例和我已修改的项目的副本，所以Angular 异步管道会对存储中的更改做出反应并重新呈现我的组件列表。它本身会重新渲染AppMyItemDetailsCardComponent的所有实例，并导致显示组件详细信息的标志为 false，并且 UI 更改和详细信息面板被隐藏。

问题：

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

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

标签： angularrxjsngrx

解决方案

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

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

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

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

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

推荐阅读