深入理解 @ngrx/effects 中 ofType 的用法与使用场景

import { ofType } from `@ngrx/effects`;

import { Injectable } from `@angular/core`;
import { Actions, createEffect, ofType } from `@ngrx/effects`;
import { of } from `rxjs`;
import { catchError, map, mergeMap } from `rxjs/operators`;
import { MyService } from `../services/my.service`;
import { loadData, loadDataSuccess, loadDataFailure } from `../actions/data.actions`;

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

  loadData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadData), // 仅处理 loadData 类型的 Action
      mergeMap(() =>
        this.myService.getData().pipe(
          map((data) => loadDataSuccess({ data })),
          catchError((error) => of(loadDataFailure({ error })))
        )
      )
    )
  );
}

import { Injectable } from `@angular/core`;
import { Actions, createEffect, ofType } from `@ngrx/effects`;
import { map, filter } from `rxjs/operators`;
import { specialAction } from `../actions/special.actions`;

@Injectable()
export class SpecialEffects {
  constructor(private actions$: Actions) {}

  specialEffect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(specialAction),
      filter((action) => action.payload.isActive), // 仅处理 isActive 为 true 的情况
      map((action) => {
        console.log(`Processing active action`, action);
        return { type: `[Special] Processed`, payload: action.payload };
      })
    )
  );
}

import { Injectable } from `@angular/core`;
import { Actions, createEffect, ofType } from `@ngrx/effects`;
import { mergeMap } from `rxjs/operators`;
import { actionOne, actionTwo } from `../actions/multiple.actions`;

@Injectable()
export class MultipleEffects {
  constructor(private actions$: Actions) {}

  handleMultipleActions$ = createEffect(() =>
    this.actions$.pipe(
      ofType(actionOne, actionTwo), // 同时监听 actionOne 和 actionTwo
      mergeMap((action) => {
        console.log(`Processing action:`, action);
        // 返回处理结果的 Action
        return { type: `[Multiple] Processed`, payload: action.payload };
      })
    )
  );
}

import { TestBed } from `@angular/core/testing`;
import { provideMockActions } from `@ngrx/effects/testing`;
import { TestScheduler } from `rxjs/testing`;
import { DataEffects } from `./data.effects`;
import { loadData, loadDataSuccess } from `../actions/data.actions`;

describe(`DataEffects`, () => {
  let effects: DataEffects;
  let actions$;
  let testScheduler: TestScheduler;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        DataEffects,
        provideMockActions(() => actions$),
      ],
    });

    effects = TestBed.inject(DataEffects);
    testScheduler = new TestScheduler((actual, expected) => {
      expect(actual).toEqual(expected);
    });
  });

  it(`should handle loadData and dispatch loadDataSuccess`, () => {
    testScheduler.run(({ hot, cold, expectObservable }) => {
      actions$ = hot(`-a`, { a: loadData() });
      const response = cold(`-b`, { b: { data: [] } });
      spyOn(effects[`myService`], `getData`).and.returnValue(response);

      expectObservable(effects.loadData$).toBe(`--c`, {
        c: loadDataSuccess({ data: [] }),
      });
    });
  });
});