在Angular中使用ngrx时捕获超时错误

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

export const timeoutError = createAction('[Error] Timeout Error');

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { timeoutError } from './error.actions';
import { catchError, map, switchMap, timeout } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class ErrorEffects {
  timeoutError$ = createEffect(() =>
    this.actions$.pipe(
      ofType('[Some Action] Some Action Type'),
      switchMap(() =>
        this.someService.someAsyncOperation().pipe(
          timeout(5000), // 设置超时时间为5秒
          map(response => ({ type: '[Some Action] Success', payload: response })),
          catchError(() => of(timeoutError())) // 捕获超时错误并触发timeoutError action
        )
      )
    )
  );

  constructor(private actions$: Actions, private someService: SomeService) {}
}

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { timeoutError } from './error.actions';

@Component({
  selector: 'app-some-component',
  template: `
    <div *ngIf="timeoutError$ | async">
      发生超时错误！
    </div>
  `
})
export class SomeComponent {
  timeoutError$ = this.store.pipe(select('timeoutError'));

  constructor(private store: Store) {}
}