Angular 角度错误处理-catchError不会为rxjs效果返回错误对象

我一直致力于在facebook等社交媒体网站上创建帖子的错误处理过程。当用户尝试创建post，但后端服务器返回该进程的错误时，用户必须看到错误

如果后端服务器返回错误，则必须触发catchError功能。之后，必须使用reducer填充称为PostState的状态

如果创建post进程失败，并且后端服务器为此进程返回错误，PostActionTypes.CreatePostFail案例必须用于postReducer

PostActionTypes.CreatePostSuccess可在有或无错误的情况下工作

我无法使用Ngrx效应处理错误过程

如何使用Ngrx效果处理错误过程

export interface PostState {
showPostId: boolean;
currentPost: Post;
currentPostId: number;
posts: Post[];
commentPost: Post;
isNewPost: boolean;
error: string;
isNewComment: boolean; }

const initialState: PostState = {
showPostId: true,
currentPost: null,
currentPostId: null,
posts: [],
commentPost: null,
isNewPost: false,
error: '',
isNewComment: false };

export function postReducer(state = initialState, action: PostActions): PostState {
switch (action.type) {

    case PostActionTypes.CreatePost:
        return {
            ...state,
            isNewPost: true
        };

    case PostActionTypes.CreatePostSuccess:
        return {
            ...state,
            posts: [...state.posts, action.payload].sort((a, b) => <any>new Date(b.createdDate) - <any>new Date(a.createdDate)),
            error: '',
            isNewPost: false
        };

    case PostActionTypes.CreatePostFail:
        return {
            ...state,
            error: action.payload,
            isNewPost: false
        };

    default:
        return state;
}

您可以在下面看到createPost$effect实现

   @Effect()
createPost$: Observable<Action> = this.actions$.pipe(
    ofType(postActions.PostActionTypes.CreatePost),
    map(((action: postActions.CreatePost) => action.payload)),
    mergeMap((post: any) =>
        this.postService.createPost(post).pipe(
            map((newPost: any) => (new postActions.CreatePostSuccess(newPost.result))),
            catchError(err => of(new postActions.CreatePostFail(err)))
        )
    )
);

@Effect（）
createPost$：可观察

如果您想查看该项目，可以在下面的中看到Github repo

我在不同的帖子中看到了一种类似的捕获错误的方法，它有相同的问题，
catchError
操作没有返回。我相信这篇文章很好地总结了这一点

TLDR：使用
switchMap
进行尝试，并捕获
createPost
流之外的错误

@Effect
createPost$: Observable<Action> = this.actions$.pipe(
  ofType(postActions.PostActionTypes.CreatePost),
  map((action: postActions.CreatePost) => action.payload),
  switchMap((post: any) =>
    this.postService.createPost(post).pipe(
      map((newPost: any) => new postActions.CreatePostSuccess(newPost.result)),
    ),
    catchError(err => (new postActions.CreatePostFail(err)))
  )
);

@效果
createPost$：Observable=此.actions$.pipe(
类型（postActions.PostActionTypes.CreatePost），
map（（action:postActions.CreatePost）=>action.payload），
switchMap（（post:any）=>
这个.postService.createPost（post.pipe）(
map（（newPost:any）=>newpostactions.CreatePostSuccess（newPost.result）），
),
catchError（err=>（new postActions.CreatePostFail（err）））
)
);
对不起，您能澄清问题并用此更新问题吗？先生，我刚刚编辑了问题@安德烈沃伦
   @Effect()
createPost$: Observable<Action> = this.actions$.pipe(
    ofType(postActions.PostActionTypes.CreatePost),
    map(((action: postActions.CreatePost) => action.payload)),
    mergeMap((post: any) =>
        this.postService.createPost(post).pipe(
            map((newPost: any) => (new postActions.CreatePostSuccess(newPost.result))),
            catchError(err => of(new postActions.CreatePostFail(err)))
        )
    )
);

@Effect
createPost$: Observable<Action> = this.actions$.pipe(
  ofType(postActions.PostActionTypes.CreatePost),
  map((action: postActions.CreatePost) => action.payload),
  switchMap((post: any) =>
    this.postService.createPost(post).pipe(
      map((newPost: any) => new postActions.CreatePostSuccess(newPost.result)),
    ),
    catchError(err => (new postActions.CreatePostFail(err)))
  )
);