私はDOMブロックを持っています:
<div (click)="toggle(block)">
<div *ngIf="block.opened">
<div *ngFor="let item of block.items"></div>
</div>
</div>
[Iディスパッチアクション]をクリックして、サーバーからデータをロードし、このデータをブロックに表示します。
toggle(block: RegistryGroup) {
this.store.dispatch(RegistryActions.ToggleRegistryBlockAction(block));
this.store.dispatch(RegistryActions.LoadRegistryLayersAction(this.block));
}
最初のイベントToggleRegistryBlockAction
は、のプロパティblock
をtrue / falseに変更します。2つ目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
。
問題は、実行後にこのエフェクトサーバーが空を返す場合があることです[]
。そのため、次回、ユーザーがリクエストすると、リクエストが繰り返し送信されます。
それを修正し、データがロードされた場合にサーバーに触れないようにする方法は?
複数の解決策があります:
loading
、loaded
、empty
、...registryGroup.items.length
、配列を次のように初期化します。null
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加