javascript - 收到错误效果“n.loadInfo$”调度了一个无效的操作
问题描述
我正在尝试为一个动作编写一个效果,但它抛出了一个错误: “ Effect “n.loadInfo$” dispatched an invalid action: 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
}
};
如果有人可以提供帮助,我将不胜感激。谢谢!
解决方案
您的效果是尝试调度 的结果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))
})
)
})
);
如有必要,您还需要添加相应的操作并在减速器中处理它。