我喜欢良好的存储模式提供的抽象所带来的可维护性，但我也感到无法准确了解某些异步函数何时完成。另外，使用较旧的、完整的 Ngrx Redux 兼容存储，我可以发布成功和失败的操作，其中包含有关哪些事情刚刚完成或失败的信息等。我正在努力使用新的 SignalStore 来处理许多以前毫不费力的功能.
使用简单的信号，我可以准确地知道特定操作何时完成，并让我的用户体验做出相应的响应。在这个特定的场景中，我在屏幕上有一个项目列表，每个项目都有自己的“删除”按钮，我想禁用并将单击的按钮的文本更改为“删除...”。 我需要准确跟踪正在删除的项目以及删除完成的时间。我可以通过我的组件中的以下内容使其正常工作...
productUx = new Map<IProduct, { deleting: boolean }>();
onDelete(product: IProduct) {
this.productUx.set(product, { deleting: true });
this.productService.delete(product.id)
.pipe(
takeUntil(this.ngUnsubscribe),
finalize(() => {
this.productUx.set(product, { deleting: false });
})
)
.subscribe();
}
我有一个 ProductUx Map 对象，它基本上只是扩展了 IProduct，允许我向任何实体添加 Ux 特定属性。我还有一个异步按钮指令，只需要一个布尔变量来触发按钮状态的更改。这是有效的，因为我知道异步操作何时完成。转向 Ngrx SignalStore，我需要处理存储区中的所有这些异步标志。我能够让它与我商店中的以下内容一起工作...
export interface IProductState {
deleting: Map<EntityId, boolean>;
}
const _delete = async (id: EntityId) => {
store.deleting().set(id, true);
await entityService.deleteAsPromise(id);
patchState(store, removeEntity(id)); // I'm using withEntities<IProduct>()
store.deleting().set(id, false);
}
...然后在我的组件 html 中...
<button (click)="onDelete(product)" app-async-button [asyncInProgress]="productStore.deleting().get(product.id)">Delete</button>
这似乎有效，但对我来说感觉“不对劲”。我需要知道每个实体的某些事情何时开始和结束。是否有更好或更优雅的方法来处理 Ngrx SignalStore 中每个实体的基本开/关标志？
信号存储是可扩展的，这意味着您可以编写自定义（通用）功能并将它们插入信号存储中。 “请求”状态就是一个很好的例子。
作为示例，请参阅示例：