在NgRx中完成远程操作前的功能

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

export const fetchDataRequest = createAction('[Data] Fetch Data Request');
export const fetchDataSuccess = createAction('[Data] Fetch Data Success', props<{ data: any[] }>());
export const fetchDataFailure = createAction('[Data] Fetch Data Failure', props<{ error: any }>());

// 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 { DataService } from './data.service';

@Injectable()
export class DataEffects {
  constructor(
    private actions$: Actions,
    private dataService: DataService
  ) {}

  fetchData$ = createEffect(() =>
    this.actions$.pipe(
      ofType('[Data] Fetch Data Request'),
      mergeMap(() =>
        this.dataService.fetchData().pipe(
          map((data) => ({ type: '[Data] Fetch Data Success', payload: { data } })),
          catchError((error) => of({ type: '[Data] Fetch Data Failure', payload: { error } }))
        )
      )
    )
  );
}

// reducers.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.fetchDataRequest, (state) => ({ ...state, loading: true })),
  on(DataActions.fetchDataSuccess, (state, { payload }) => ({ ...state, data: payload.data, loading: false })),
  on(DataActions.fetchDataFailure, (state, { payload }) => ({ ...state, error: payload.error, loading: false }))
);

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

catchError((error) => of({ type: '[Data] Fetch Data Failure', payload: { error } }))

on(DataActions.fetchDataFailure, (state, { payload }) => ({ ...state, error: payload.error, loading: false }))