获取错误 Effect "n.loadInfo$" 调度了一个无效的操作

Question

我正在尝试为一个动作编写一个效果，但它抛出了一个错误： "Effect "n.loadInfo$" 调度了一个无效的动作：null Error"

我的效果如下：

  @Effect()
  loadInfo$ = 
        this.actions.ofType(fromHeaderActions.EInfoActions.OPEN_INFO).pipe(
    withLatestFrom(
      this.store.select(fromSelectors.GetINFOPayload)),
    switchMap(([action, infoPayLoad]) => {
      let cAction: fromHeaderActions.OpenINFOWIdget = 
          <fromHeaderActions.OpenINFOWIdget>action;
      return this.infoService.loadINFO(infoPayLoad).pipe(
       // Dispatch success action
          map(response => new 
              fromHeaderActions.OpenINFOWIdgetSuccess(response)),
      catchError(error => {
        return of(new 
         fromHeaderActions.OpenINFOWIdgetFail(error.message))
      })
     )
   })
 );

我的操作定义如下：

export class OpenINFOWIdget extends BaseGetDetailsAction implements Action {
  readonly type = EInfoActions.OPEN_INFO; 
  constructor() {
  super();   
 }
}


//added action after the comment
export class OpenINFOWIdgetSuccess extends BaseGetDetailsAction 
 implements Action {
 readonly type = EInfoHeaderActions.OPEN_INFO_SUCCESS;
 constructor(public payload: INFO) {
  super();
  }
 }

export class OpenINFOWIdget extends BaseGetDetailsAction implements Action {
  readonly type = EInfoActions.OPEN_INFO_FAIL;
  constructor(public payload: string) {
  super();    
 }
}

并且在如下服务中：

public INFOPayloadsource = new BehaviorSubject<INFO>(initINFO);
infoPayload$ = this.INFOPayloadsource.asObservable();

private SelectedInfoSource = new Subject<INFO>();
selectedInfo$ = this.SelectedInfoSource.asObservable();

  loadINFO(payload: INFO): Observable<INFO> {    
   if (payload != null) {
     this.IsInfoEnableSource.next(true);     
     this.InfoPayloadsource.next(payload);
   }
   return this.selectedInfo$;
  }

我在效果中使用了如下选择器：

export const GetINFOPayload = createSelector(getInfoState, 
(state: 
      InfoDetailsState) => {
        if (state) {
          if (state.infoDetails != null && 
              state.infoDetails.INFODetail != 
              null &&
              state.infoDetails.INFODetail.Active != null) {
           let payload: INFO = { ...initINFO };
           payload = state.infoDetails.INFODetail.Active;
           return payload;
        }
      }
    return null;
  });

在评论后创建减速器如下：

case 
  fromInfoDetailsHeaderActions.EInfoHeaderActions.OPEN_INFO: {
      return {
        ...state,
        IsScreenOverlay: true,
        IsEditable: false
      }
    };
    case fromInfoDetailsHeaderActions.EInfoHeaderActions.OPEN_INFO_SUCCESS: {
      return {
        ...state,
        IsScreenOverlay: false,
        IsEditable: true
      }
    };

如果有人能提供帮助，我将不胜感激。谢谢！

Answer 1

您的效果正在尝试发送 this.infoService.loadINFO() 的结果，这就是为什么您会收到错误消息，指出它不是有效操作。

您应该 map 将此改为成功操作：

  @Effect()
  loadInfo$ = this.actions.ofType(fromHeaderActions.EInfoActions.OPEN_INFO).pipe(
    withLatestFrom(
      this.store.select(fromSelectors.GetINFOPayload)
    ),
    switchMap(([action, infoPayLoad]) => {
      let cAction: fromHeaderActions.OpenINFOWIdget = <fromHeaderActions.OpenINFOWIdget>action;

      return this.infoService.loadINFO(infoPayLoad).pipe(
        // Dispatch success action
        map(response => new fromHeaderActions.OpenINFOWIdgetSuccess(response)),
        catchError(error => {
          return of(new fromHeaderActions.OpenINFOWIdgetFail(error.message))
        })
       )
     })
 );

如有必要，您还需要添加相应的操作并在您的减速器中进行处理。

获取错误 Effect "n.loadInfo$" 调度了一个无效的操作

Getting error Effect "n.loadInfo$" dispatched an invalid action

javascript

angular

typescript

ngrx

ngrx-effects