如何接收来自action ngxs的http响应

// fetch-data.action.ts
import { HttpClient } from '@angular/common/http';
import { Action, State, StateContext } from '@ngxs/store';
import { tap } from 'rxjs/operators';

export class FetchDataAction {
  static readonly type = '[Data] Fetch';

  constructor(public payload: string) {}
}

export interface DataStateModel {
  responseData: any;
}

@State<DataStateModel>({
  name: 'data',
  defaults: {
    responseData: null
  }
})
export class DataState {
  constructor(private http: HttpClient) {}

  @Action(FetchDataAction)
  fetchData(ctx: StateContext<DataStateModel>, action: FetchDataAction) {
    return this.http.get(action.payload).pipe(
      tap((response: any) => {
        ctx.patchState({
          responseData: response
        });
      })
    );
  }
}

// data.component.ts
import { Component, OnInit } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { FetchDataAction, DataState, DataStateModel } from './fetch-data.action';

@Component({
  selector: 'app-data',
  template: `
    <div *ngIf="responseData$ | async as responseData">
      <!-- Display responseData in the component -->
      {{ responseData | json }}
    </div>
  `
})
export class DataComponent implements OnInit {
  @Select(DataState)
  responseData$: Observable<DataStateModel>;

  constructor(private store: Store) {}

  ngOnInit() {
    // Dispatch FetchDataAction to initiate HTTP request
    this.store.dispatch(new FetchDataAction('https://api.example.com/data'));
  }
}