NGRX Effect Typescript Error When Trying to Return Multiple Actions

问题

I'm facing some difficulties when trying to return multiple actions in my NGRX effect. I know how to return multiple actions, but I'm trying to set up two sets of actions to fire based on a boolean value.

The code is as follows:

  @Effect()
  loadCompanyDetail = this.actions$
    .ofType(fromActions.COMPANY_DETAIL_LOAD)
    .pipe(
      switchMap(() => {
        return this.companyService
          .getCompanyByID(
            fromUtility.obs2Str(
              this.routerStore.select(fromRouter.getCompanyId)
            )
          )
          .pipe(
            switchMap(res => {
              switch (res.success) {
                case true:
                  const locations = res.data.locations;
                  const detail = res.data;
                  delete res.data.locations;
                  return [
                    new fromActions.CompanyDetailLoadSuccess(detail),
                    new fromActions.CompanyLocationsLoadSuccess(locations)
                  ];
                case false:
                  return [
                    // new fromActions.CompanyDetailLoadFailure(),
                    // new fromActions.CompanyLocationsLoadFailure()
                  ];
              }
            })
          );
      })
    );

The commented out actions when active throws the following error:

ERROR in src/company/store/effects/company-detail.effects.ts(34,23): error TS2345: Argument of type '(res: { success: boolean; msg: string; data: Company; }) => (CompanyDetailLoadSuccess | CompanyLo...' is not assignable to parameter of type '(value: { success: boolean; msg: string; data: Company; }, index: number) => ObservableInput'. Type '(CompanyDetailLoadFailure | CompanyLocationsLoadFailure)[]' is not assignable to type 'ObservableInput'. Type '(CompanyDetailLoadFailure | CompanyLocationsLoadFailure)[]' is not assignable to type 'ArrayLike'. Index signatures are incompatible. Type 'CompanyDetailLoadFailure | CompanyLocationsLoadFailure' is not assignable to type 'CompanyDetailLoadSuccess | CompanyLocationsLoadSuccess'. Type 'CompanyDetailLoadFailure' is not assignable to type 'CompanyDetailLoadSuccess | CompanyLocationsLoadSuccess'. Type 'CompanyDetailLoadFailure' is not assignable to type 'CompanyLocationsLoadSuccess'. Types of property 'type' are incompatible. Type '"[COMPANY DETAIL] Load Failure"' is not assignable to type '"[COMPANY LOCATIONS] Load Success"'.

I have also tried using if - else instead of the switch case.

The action file which contains the action I'm trying to fire is as follows:

import { Action } from '@ngrx/store';

export const COMPANY_DETAIL_LOAD = '[COMPANY DETAIL] Load';
export const COMPANY_DETAIL_LOAD_SUCCESS = '[COMPANY DETAIL] Load Success';
export const COMPANY_DETAIL_LOAD_FAILURE = '[COMPANY DETAIL] Load Failure';

export class CompanyDetailLoad implements Action {
  readonly type = COMPANY_DETAIL_LOAD;
}

export class CompanyDetailLoadSuccess implements Action {
  readonly type = COMPANY_DETAIL_LOAD_SUCCESS;

  constructor(public payload: any) {}
}

export class CompanyDetailLoadFailure implements Action {
  readonly type = COMPANY_DETAIL_LOAD_FAILURE;
}

export type CompanyDetailActions =
  | CompanyDetailLoad
  | CompanyDetailLoadSuccess
  | CompanyDetailLoadFailure;

CompanyLocationsLoadFailure is exactly the same as CompanyDetailLoadFailure.

Any help is greatly appreciated.

Thanks in advance.

来源：https://stackoverflow.com/questions/50175718/ngrx-effect-typescript-error-when-trying-to-return-multiple-actions

标签

angular