ngrx - 有条件地返回 Observable在 Ngrx 效应中
问题描述
我目前正在重构我的代码以包含 ngrx 商店。为了最大限度地减少我的 LoadDeals() 操作的 API 调用量,我正在检查存储是否为空的效果。只有当它为空时,才继续进行 API 调用。我首先尝试使用在 SO ( https://stackoverflow.com/a/50527652/2879771 ) 上找到的这种模式。
我意识到缺点是,如果存储中有数据,则每个 LoadDeals() 调用都会被忽略。为了有可能强制加载,我在 LoadDeals() 类中包含了一个可选的布尔有效负载。如果设置为 true,请调用 API。
这是我的第一次尝试
@Effect() loadDeals$: Observable<Action> = this._actions$.pipe(
ofType<LoadDeals>(actions.LOAD_DEALS),
withLatestFrom(this._store.pipe(select(getDealsLoaded))),
switchMap(([action, hasLoaded]) => {
if (!hasLoaded || action.force) {
return this._deals.deals.pipe(
map(deals => new LoadDealsSuccess(deals)),
catchError(error => of(new LoadDealsFail(error)))
);
} else {
return of(new LoadDealsSkip());
}
})
);
但这会产生以下错误:
Argument of type '([action, hasLoaded]: [LoadDeals, boolean]) => Observable<LoadDealsSuccess | LoadDealsFail> | Observable<LoadDealsSkip>' is not assignable to parameter of type '(value: [LoadDeals, boolean], index: number) => ObservableInput<LoadDealsSuccess | LoadDealsFail>'.
Type 'Observable<LoadDealsSuccess | LoadDealsFail> | Observable<LoadDealsSkip>' is not assignable to type 'ObservableInput<LoadDealsSuccess | LoadDealsFail>'.
Type 'Observable<LoadDealsSkip>' is not assignable to type 'ObservableInput<LoadDealsSuccess | LoadDealsFail>'.
Type 'Observable<LoadDealsSkip>' is not assignable to type 'Iterable<LoadDealsSuccess | LoadDealsFail>'.
Property '[Symbol.iterator]' is missing in type 'Observable<LoadDealsSkip>'.
这是我的交易.actions.ts
import { Action } from '@ngrx/store';
import { ITmsCpRecord } from '@models/cp';
export enum DealsActionTypes {
LOAD_DEALS = '[Deals] Load Deals',
LOAD_DEALS_FAIL = '[Deals API] Load Deals Fail',
LOAD_DEALS_SUCCESS = '[Deals API] Load Deals Success',
LOAD_DEALS_SKIP = '[Deals Store] Load Deals Skip (cached)'
}
export class LoadDeals implements Action {
readonly type = DealsActionTypes.LOAD_DEALS;
constructor(public force: boolean = false) {}
}
export class LoadDealsFail implements Action {
readonly type = DealsActionTypes.LOAD_DEALS_FAIL;
constructor(public payload: any) {}
}
export class LoadDealsSuccess implements Action {
readonly type = DealsActionTypes.LOAD_DEALS_SUCCESS;
constructor(public payload: ITmsCpRecord[]) {}
}
export class LoadDealsSkip implements Action {
readonly type = DealsActionTypes.LOAD_DEALS_SKIP;
}
// action types
export type DealsAction = LoadDeals|LoadDealsFail|LoadDealsSuccess|LoadDealsSkip;
所以我把它分成不同的效果,听相同的动作,但使用不同的过滤器操作符。这工作正常。虽然我不想拆分它,因为它是一些冗余代码。
有人看到我的错误吗?干杯
@Effect() loadDeals$: Observable<Action> = this._actions$.pipe(
ofType<LoadDeals>(actions.LOAD_DEALS),
withLatestFrom(this._store.pipe(select(getDealsLoaded))),
filter(([action, hasLoaded]) => !hasLoaded || action.force),
switchMap(() => {
return this._deals.deals.pipe(
map(deals => new LoadDealsSuccess(deals)),
catchError(error => of(new LoadDealsFail(error)))
);
})
);
@Effect() loadDealsSkip$: Observable<Action> = this._actions$.pipe(
ofType<LoadDeals>(actions.LOAD_DEALS),
withLatestFrom(this._store.pipe(select(getDealsLoaded))),
filter(([action, hasLoaded]) => hasLoaded && !action.force),
switchMap(() => of(new LoadDealsSkip()))
);
解决方案
您可能不会喜欢这个答案,但我建议为此创建 2 个操作。像您已经拥有的一个加载动作,以及另一个强制加载动作。
这也意味着创建 2 个效果,但在第二个中,您不必从商店中选择。
推荐阅读
- node.js - 如何在 mongooseJS 中将模式相互连接?
- php - 将 Blade 片段从一个 Laravel 包推送到另一个“父”包
- swift - How to start AVAudioPlayer without loading full buffer?
- ibm-watson - 我可以在 Watson Assistant 中使用什么表达式来表示特定日期的营业时间?
- reactjs - React Laravel - 文件显示状态但不在控制器中
- r - 将辅助轴从 0 设置为 1
- excel - 在选择案例中使用变量作为案例
- sql - SQL Oracle - 如果不满足某个条件,则将记录插入同一个表中
- .net - 在不相关的项目之间共享 ANTLR 语法
- javascript - 根据 Gatsby JS 中同一页面上的类别对文章进行分组