如何使ngrx效果等待异步函数

// actions.ts
import { createAction, props } from '@ngrx/store';

export const loadData = createAction('[Data] Load Data');
export const loadDataSuccess = createAction('[Data] Load Data Success', props<{ data: any[] }>());
export const loadDataFailure = createAction('[Data] Load Data Failure', props<{ error: any }>());

// reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as DataActions from './actions';

export interface State {
  data: any[];
  loading: boolean;
  error: any;
}

export const initialState: State = {
  data: [],
  loading: false,
  error: null,
};

const _dataReducer = createReducer(
  initialState,
  on(DataActions.loadData, (state) => ({ ...state, loading: true })),
  on(DataActions.loadDataSuccess, (state, { data }) => ({ ...state, data, loading: false })),
  on(DataActions.loadDataFailure, (state, { error }) => ({ ...state, error, loading: false }))
);

export function dataReducer(state, action) {
  return _dataReducer(state, action);
}

// effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import * as DataActions from './actions';
import { DataService } from '../services/data.service';

@Injectable()
export class DataEffects {
  loadData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(DataActions.loadData),
      mergeMap(() =>
        this.dataService.getData().pipe(
          map((data) => DataActions.loadDataSuccess({ data })),
          catchError((error) => of(DataActions.loadDataFailure({ error })))
        )
      )
    )
  );

  constructor(private actions$: Actions, private dataService: DataService) {}
}

// component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import * as DataActions from './actions';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  constructor(private store: Store) {}

  ngOnInit() {
    this.store.dispatch(DataActions.loadData());
  }
}