问Ngrx效应中的自然返回Observable<Action>
EN

Stack Overflow用户

提问于 2018-10-25 04:03:02

回答 1查看 1.2K关注 0票数 1

我目前正在重构我的代码以包含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>'.

这是我的deals.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()))
);