@ngrx/effects#ofType TypeScript Examples

@Effect()
  loadAll$: Observable<Action> = this.actions$.pipe(
    ofType(identificationCardScans.LOAD_ALL),
    debounceTime(300),
    map((action: identificationCardScans.LoadAllAction) => action.payload),
    switchMap(payload => {
      const nextSearch$ = this.actions$.pipe(ofType(identificationCardScans.LOAD_ALL), skip(1));

      return this.customerService.fetchIdentificationCardScans(payload.customerIdentifier, payload.identificationCardNumber).pipe(
        takeUntil(nextSearch$),
        map(scans => new identificationCardScans.LoadAllCompleteAction(scans)),
        catchError(() => of(new identificationCardScans.LoadAllCompleteAction([]))),
      );
    }),
  );

// Customer list
    @Effect()
    CustomerGrouplists$: Observable<Action> = this.action$.pipe(
      ofType(actions.ActionTypes.DO_Customers_Group_List),
      map((action: actions.DoCustomersGroupListAction) => action.payload),
      switchMap(state => {
        return this.Service.customersGroupList(state).pipe(
          switchMap(customers => [
            new actions.DoCustomersGroupListSuccessAction(customers)
          ]),
          catchError(error => of(new actions.DoCustomersGroupListFailAction(error)))
        );
      })
    );

onAddTradeLogs$ = createEffect(() =>
    this.actions$.pipe(
      ofType(addTradeLogs),
      withLatestFrom(this.store.select(selectFilter)),
      map(([action, filter]) => {
        const newFilter = { ...filter };
        const reduced = action.tradeLogs.reduce((acc, cur) => {
          //check alias
          if (!acc.aliases) {
            acc.aliases = {};
          }
          if (!acc.aliases[cur.alias]) {
            acc = {
              ...acc,
              aliases: {
                ...acc.aliases,
                [cur.alias]: { enabled: true, expanded: true, algos: {} },
              },
            };
          }
          if (!acc.aliases[cur.alias].algos[cur.name]) {
            acc.aliases[cur.alias].algos[cur.name] = {
              enabled: true,
              expanded: false,
              symbols: {},
            };
          }
          if (!acc.aliases[cur.alias].algos[cur.name].symbols[cur.asset]) {
            acc.aliases[cur.alias].algos[cur.name].symbols[cur.asset] = {
              enabled: true,
            };
          }
          return acc;
        }, newFilter);
        return updateFilter({ filter: reduced });
      })
    )
  );

persistTodos = createEffect(
    () =>
      this.actions$.pipe(
        ofType(
          todoAction.actionTodosAdd,
          todoAction.actionTodosFilter,
          todoAction.actionTodosRemoveDone,
          todoAction.actionTodosToggle
        ),
        withLatestFrom(this.store.pipe(select(selectTodosState))),
        tap(([action, todos]) =>
          this.localStorageService.setItem(TODOS_KEY, todos)
        )
      ),
    { dispatch: false }
  );

@Effect()
  search$: Observable<Action> = this.actions$.pipe(
    ofType(userActions.SEARCH),
    debounceTime(300),
    switchMap(() => {
      const nextSearch$ = this.actions$.pipe(ofType(userActions.SEARCH), skip(1));

      return this.identityService.listUsers().pipe(
        takeUntil(nextSearch$),
        map(this.excludeSystemUsers),
        map(
          users =>
            new userActions.SearchCompleteAction({
              elements: users,
              totalPages: 1,
              totalElements: users.length,
            }),
        ),
        catchError(() => of(new userActions.SearchCompleteAction(emptySearchResult()))),
      );
    }),
  );

loadAssets$ = createEffect(() => this.actions$.pipe(
    ofType(loadAssets),
    withLatestFrom(
      this.store$.pipe(select(selectLoadedAssets))
    ),
    switchMap(([action, loadedAssets]) => {
      this.store$.dispatch(setLoadingMessage({message: 'Loading website assets.'}));
      if ( loadedAssets ) {
        this.store$.dispatch(setLoadingMessage({message: '<b>Loading</b> done.'}));
        return [loadAssetsSuccess({loadedAssets})];
      } else {
        return this.assetsService.getAll().pipe(
          switchMap(assets => {
            this.store$.dispatch(setLoadingMessage({message: '<b>Loading</b> done.'}));
            return of(assets);
          }),
          delay(2000),
          switchMap(assets => {
            return of(loadAssetsSuccess({loadedAssets: assets}));
          })
        );
      }
    }))
  );

@Effect({ dispatch: false })
  deleteIdentificationCardScanSuccess$: Observable<Action> = this.actions$.pipe(
    ofType(identificationCardScanActions.DELETE_SUCCESS),
    tap(() =>
      this.notificationService.send({
        type: NotificationType.MESSAGE,
        message: 'Scan is going to be deleted',
      }),
    ),
  );

loadFull$ = createEffect(() =>
    this.actions$.pipe(
      ofType(MdViewActions.loadFullMetadata),
      switchMap(({ uuid }) =>
        this.searchService.search(
          'bucket',
          JSON.stringify(this.esService.getMetadataByIdPayload(uuid))
        )
      ),
      map((response: EsSearchResponse) => {
        const records = this.esMapper.toRecords(response)
        const full = records[0]
        return MdViewActions.loadFullSuccess({ full })
      }),
      catchError((error) => of(MdViewActions.loadFullFailure({ error })))
    )
  )

loginSuccess$ = createEffect(() =>
    this.actions$.pipe(ofType(loginSuccess),
      tap(({ user }) => {
        this.local.set('user', JSON.stringify(user));
        this.toast.success(`Welcome back ${user.name}!`);
        this.router.navigate([ '/' ]);
      })
    ), { dispatch: false }
  );