Angular + ngRx 如何为新状态刷新组件

Question

我对如何更新组件有疑问，我正在使用 Angular（最新版本）制作一个网络应用程序，我正在使用 ngRx 来管理状态。

我的网站有一个包含项目的 Gridview，其中每个项目都是一个组件（见图）

现在，我想更新 ItemComponent 中的数据，例如第一个项目（without add a subcriber in every Item component）但我不知道如何去做。

执行此操作的最佳方法是什么？我想更新它们之间完全独立的任何项目，因为如果我在 ItemComponent 中添加一个订阅，那么我将不得不添加一个有条件地检查组件 ID，如果不同则将其排除

希望我解释正确

Answer 1

将网格的项目列表添加到您的 ngrx 商店
网格视图组件选择要显示的项目列表
网格视图组件将每个项目传递给项目组件
当从项目组件中更新项目时，您将使用更新后的项目作为其有效负载分派一个操作
减速器处理动作，并更新项目列表中的相关项目
商店发布包含更新商品的完整列表
网格视图组件更新以反映更改

网格视图组件模板：

<grid-view-item *ngFor="item of items$ | async" [item]="item"></grid-view-item>

网格视图组件class:

items$ = this.store.select(selectItems);

网格视图项组件模板：

<p>Name: {{ item.name }} </p>
// etc

网格视图项目组件class:

@Input item: GridViewItem;

// call this depending on your implementation
onEdited(updatedItem: GridViewItem){
  this.store.dispatch(gridViewItemUpdatedAction(updatedItem));
}

减速机
替换更新的项目，其余保持原样：

on(gridViewItemUpdatedAction, (state, { updatedItem }) => ({
  ..state,
  items: items.map(item => item.id === updatedItem .id ? updatedItem : item)
}),

Angular + ngRx 如何为新状态刷新组件

Angular + ngRx how to Refreshing a component for a new state

ngrx

angular