通过管道使用另一个API调用处理NgRx效果中的数据

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

export const loadData = createAction('[Data] Load Data');

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class DataEffects {
  loadData$ = createEffect(() =>
    this.actions$.pipe(
      ofType('[Data] Load Data'),
      switchMap(() =>
        this.apiService.getData().pipe(
          map((data) => ({ type: '[Data] Load Data Success', payload: data })),
          catchError((error) => of({ type: '[Data] Load Data Failure', payload: error }))
        )
      )
    )
  );

  constructor(private actions$: Actions, private apiService: ApiService) {}
}

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { loadData } from './data.actions';

@Component({
  selector: 'app-data',
  template: `
    <button (click)="onLoadData()">Load Data</button>
  `,
})
export class DataComponent {
  constructor(private store: Store) {}

  onLoadData() {
    this.store.dispatch(loadData());
  }
}