调度Action成功后如何在组件中获取实际的HTTP响应内容

原因说明 #

你当前使用的是NGXS状态管理框架，store.dispatch() 方法默认返回的是动作执行完成后的最新完整状态快照，所以你打印的result是整个state而非API原始响应。要拿到API返回的动态消息，有两种常用实现方案：

方案1：将响应消息存入State（推荐，符合状态管理数据流规范） #

步骤1：修改State定义，新增消息存储字段

首先在你的CalendarStateModel里加一个存储成功消息的字段：

export interface CalendarStateModel {
  holidaysList: IHoliday[];
  // 新增字段存储成功消息
  holidaysSuccessMsg?: string;
}

步骤2：修改Action处理逻辑，把消息存入State

调整Store.ts里的fetchAllHolidays逻辑，把API返回的消息也存到State：

@Action(FetchHolidays)
fetchAllHolidays(
  ctx: StateContext<CalendarStateModel>,
  { param }: FetchHolidays
) {
  return this._http.post('endpoint', param).pipe(
    tap((apiResult) => {
      const data = apiResult.response.data;
      const holidays = data.holidayLists as IHoliday[];
      // 读取API返回的成功消息
      const successMsg = apiResult.response.msg;
      ctx.patchState({
        holidaysList: holidays,
        holidaysSuccessMsg: successMsg
      });
    })
  )
}

步骤3：组件内订阅对应State字段展示toast

组件中监听holidaysSuccessMsg的变化，有值时弹出toast后清空字段即可：

import { Select } from '@ngxs/store';
import { CalendarState } from './xxx/store.path';

export class YourComponent {
  // 订阅成功消息字段
  @Select(CalendarState.holidaysSuccessMsg) holidaysSuccessMsg$: Observable<string>;

  ngOnInit() {
    // 监听消息变化，弹出toast后清空状态里的消息，避免重复触发
    this.holidaysSuccessMsg$.pipe(filter(Boolean)).subscribe(msg => {
      this.toast.success(msg);
      this._store.dispatch(new ClearHolidaysSuccessMsg());
    })
  }

  loadHolidays() {
    const param = {
      holidayFor: 1,
      userId: 12
    };
    this._store.dispatch(new FetchHolidays(param)).subscribe();
  }
}

对应新增一个清空消息的Action即可。

方案2：通过Actions流监听动作成功事件，直接拿响应（不需要存State） #

如果你不需要把成功消息持久化到State，可以直接用NGXS的Actions流监听动作执行成功的事件，拿到响应：

步骤1：修改Action处理逻辑，把响应挂载到Action对象

import { ActionContext } from '@ngxs/store';

@Action(FetchHolidays)
fetchAllHolidays(
  ctx: StateContext<CalendarStateModel>,
  action: FetchHolidays & ActionContext
) {
  return this._http.post('endpoint', action.param).pipe(
    tap((apiResult) => {
      const data = apiResult.response.data;
      const holidays = data.holidayLists as IHoliday[];
      ctx.patchState({
        holidaysList: holidays
      });
      // 把响应挂载到action对象上传递
      action['response'] = apiResult.response;
    })
  )
}

步骤2：组件内用ofActionSuccessful监听动作成功

import { Actions, ofActionSuccessful } from '@ngxs/store';

export class YourComponent {
  constructor(private _store: Store, private actions$: Actions, private toast: ToastService) {}

  loadHolidays() {
    const param = {
      holidayFor: 1,
      userId: 12
    };

    // 监听本次动作成功事件，take(1)保证只触发一次本次请求的回调
    this.actions$.pipe(
      ofActionSuccessful(FetchHolidays),
      take(1)
    ).subscribe((action: any) => {
      this.toast.success(action.response.msg);
    })

    this._store.dispatch(new FetchHolidays(param)).subscribe();
  }
}

内容的提问来源于stack exchange，提问作者RAHUL KUNDU