NGXS, лучший способ отправить действия запуска, успеха или неудачи из одного действия?

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, а затем убедитесь, что я вызываю success только после успешного возврата запроса.

Также, следуя документам 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))
    }
  ))
}