angular - 如何防止在 NgRx 中第二次加载数据?
问题描述
我有一个 DOM 块:
<div (click)="toggle(block)">
<div *ngIf="block.opened">
<div *ngFor="let item of block.items"></div>
</div>
</div>
通过单击我调度操作以从服务器加载数据并在块中显示此数据:
toggle(block: RegistryGroup) {
this.store.dispatch(RegistryActions.ToggleRegistryBlockAction(block));
this.store.dispatch(RegistryActions.LoadRegistryLayersAction(this.block));
}
第一个事件ToggleRegistryBlockAction
将属性更改block
为真/假。第二个LoadRegistryLayersAction
通过向服务器发出请求block.id
并将数据返回block
到与属性相同的状态block.items = Server Response;
在我听动作的有效方面LoadRegistryLayersAction
:
loadRegistriesLayers$: Observable<Action> = createEffect(() =>
this.actions$.pipe(
ofType(RegistryActions.LoadRegistryLayersAction),
filter(
(registryGroup) =>
registryGroup.items && !registryGroup.items.length
),
switchMap((registryGroup: RegistryGroup) =>
from(this.registry.getRegistryLayers(registryGroup.Id)).pipe(
map((layers: { [key: string]: RegistryLayerItemGeneric[] }) => {
return RegistryActions.SuccessLoadRegistryLayersAction({
payload: {
layers: this.registry.createLayersMapWithObjects(layers),
registryGroupId: registryGroup.Id,
},
});
}),
catchError((error: Error) => {
return of(RegistryActions.ErrorRegistryLayersAction(error));
})
)
)
)
);
我filter
采取行动并检查数据是否已经存在。为此,我检查块是否有registryGroup.items && !registryGroup.items.length
.
问题是,有时执行此效果服务器后可能会返回 empty []
。所以下一次,当用户请求它时,它会重复发送请求。
如果加载了数据,如何修复它并且不要触摸服务器?
解决方案
有多种解决方案:
- 保留一个状态属性,它可以是
loading
,loaded
,empty
,... - 保留在状态中获取的 id 列表,并在发送请求之前检查此列表
- 不要检查
registryGroup.items.length
,并将数组初始化为null
推荐阅读
- bash - 获取字符串的特定部分并将另一部分设置为 null
- terminal - 在终端中更改用户、路径和 git 分支名称的颜色
- c++builder - 如何在 C++ Builder 中完全重新加载 TFDManager?
- python - 使用 Python 创建重复图像,即相似图像但不是原始图像(诱饵技术)
- validation - 表单中两个日期之间的 Symfony 验证/比较
- excel - VBA selenium 运行 Brave 浏览器
- go - Kafka 消费者再次收到相同的消息
- python - 在 Google Colab 中训练具有不同图像大小的自定义 Mask RCNN。不幸的是我无法让它运行
- c# - System.Exception:找不到方法:'ILoggerFactory.AddConsole(Microsoft.Extensions.Logging.ILoggerFactory,Microsoft.Extensions.Logging.LogLevel)'
- nginx - 防止 nginx 添加额外的斜杠