Angular 防止来自NGRX效应的冗余API调用

我正在学习如何使用NGRX库将Redux架构集成到Angular应用程序中，遇到了一个有趣的问题，我对此感到好奇。我想知道当多个组件同时触发LoadApps操作时，如何防止对服务器的多个冗余API调用

我有以下减速器和效果：

export function appsReducer(state = initialState, action: AppsActions): AppsState {
    switch (action.type) {
        case AppsActionTypes.LoadApps:
            return {
                ...state,
                pending: true,
                data: []
            };

        case AppsActionTypes.LoadAppsSuccess:
            return {
                ...state,
                pending: false,
                data: action.payload
            };

        default:
            return state;
    }
}

从我的API加载应用程序对象列表的。如果我的angular应用程序中有两个同级组件，例如侧栏导航和顶栏导航组件，每个组件都需要应用程序列表，它们都会在其OnInit方法中触发LoadApps操作，从而导致对服务器的两个完全相同的API调用

如果效果在触发另一个api请求之前从状态获取pending boolean以确保它不是true，那么在我看来，在pending设置为true之前，对效果的第二个调用可能已经开始运行了

---

NGRX是否为此提供了某种机制？

尝试使用

排气图

@Effect()
loadApps = this.actions.pipe(
    ofType(AppsActionTypes.LoadApps),
    exhaustMap(() => this.appService.getApps()),
    map(res => [new LoadAppsSuccess(res)])
);

exhaustMap
将忽略任何传入事件，直到完成exhaustMap中的可观察事件

@Effect()
loadApps = this.actions.pipe(
    ofType(AppsActionTypes.LoadApps),
    exhaustMap(() => this.appService.getApps()),
    map(res => [new LoadAppsSuccess(res)])
);