Question

我有以下代码来提取所有帖子

`    @Action(actions.FetchPosts)
    fetchAll(ctx: StateContext<PostStateModel>){
        return this.postService.fetchPosts().pipe(tap((postsResults) => {
            const state = ctx.getState();
                ctx.patchState({
                ...state,
                posts: [                    
                    ...postsResults                    
                ],                
            })
        }),
        mergeMap(() => {
          console.log("Inside of mergeMap")
          return ctx.dispatch(new actions.FetchPostsSuccess())
        }),      
        catchError(err => 
        {
          console.log("Inside of catchError")
          return ctx.dispatch(new actions.FetchPostsFail(err))
        }
      ))
    }`

这可行，但是，我想在致电我的邮政服务之前执行另一次派遣。使用异步编程确保我首先调度将加载属性设置为true的启动操作的最佳方法是什么，然后确保仅在请求成功返回后才调用成功。

此外，在ngxs文档之后，我正在使用mergeMap（）似乎可以完成工作。不过我很好奇，返回帖子数组的postService返回单个可观察值还是单个可观察值，然后再发出多个更高阶的可观察值（内部可观察值）？

Answer 1

您可以开始调度加载操作：

@Action(actions.FetchPosts)
fetchAll(ctx: StateContext<PostStateModel>){
    return ctx.dispatch(new ChangeLoadingToInProgress()).pipe(
      mergeMap(() => this.postService.fetchPosts()),
      tap((postsResults) => {
        const state = ctx.getState();
            ctx.patchState({
            ...state,
            posts: [                    
                ...postsResults                    
            ],                
        })
    }),
    mergeMap(() => {
      console.log("Inside of mergeMap")
      return ctx.dispatch(new actions.FetchPostsSuccess())
    }),      
    catchError(err => 
    {
      console.log("Inside of catchError")
      return ctx.dispatch(new actions.FetchPostsFail(err))
    }
  ))
}

或者我相信您可以立即更改状态：

@Action(actions.FetchPosts)
fetchAll(ctx: StateContext<PostStateModel>){
    ctx.patchState({ loading: true });
    return this.postService.fetchPosts().pipe(tap((postsResults) => {
        const state = ctx.getState();
            ctx.patchState({
            ...state,
            posts: [                    
                ...postsResults                    
            ],                
        })
    }),
    mergeMap(() => {
      console.log("Inside of mergeMap")
      return ctx.dispatch(new actions.FetchPostsSuccess())
    }),      
    catchError(err => 
    {
      console.log("Inside of catchError")
      return ctx.dispatch(new actions.FetchPostsFail(err))
    }
  ))
}

NGXS，从同一动作分派开始，成功或失败动作的最佳方法是什么？

1 个答案: