@ngrx/effects#Effect TypeScript Examples

@Effect()
  createTeller$: Observable<Action> = this.actions$.pipe(
    ofType(tellerActions.CREATE_TELLER),
    map((action: tellerActions.CreateTellerAction) => action.payload),
    mergeMap(payload =>
      this.tellerService.create(payload.officeId, payload.teller).pipe(
        map(
          () =>
            new tellerActions.CreateTellerSuccessAction({
              activatedRoute: payload.activatedRoute,
              resource: payload.teller,
            }),
        ),
        catchError(error => of(new tellerActions.CreateTellerFailAction(error))),
      ),
    ),
  );

// Pages Bulk Delete
  @Effect()
  doPagesBulkDelete$: Observable<Action> = this.action$.pipe(
    ofType(actions.ActionTypes.DO_PAGES_BULK_DELETE),
    map((action: actions.DoPagesBulkDelete) => action.payload),
    switchMap(state => {
      return this.apiCli.pagesBulkDelete(state).pipe(
        tap(response => {
          this.appState.dispatch(
            new actions.GetActiveCount({ count: 1, status: 1 })
          );
          this.appState.dispatch(
            new actions.GetInactiveCount({ count: 1, status: 0 })
          );
        }),
        switchMap(user => [new actions.DoPagesBulkDeleteSuccess(user)]),
        catchError(error => of(new actions.DoPagesBulkDeleteFail(error)))
      );
    })
  );

@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()))),
      );
    }),
  );

@Effect()
  ViewProject$ = this.actions$.pipe(
    ofType(ProjectActions.ViewRecipe),
    switchMap(({ data }) => {
      return this.restService.getRecipe(data).pipe(
        map((projectData) => {
          const project = {
            name: projectData.name,
            uuid: projectData.uuid,
            mutable: projectData.mutable,
            ...projectData.data,
          }
          this.eventEmitterService.broadcast('initialize:node', {})
          this.eventEmitterService.broadcast('load: code', projectData.code)
          return ProjectActions.SaveProjectSuccess({ data: project })
        }),
        catchError((error) => {
          if (error.status >= 500) return of(GlobalError.ServerError({message: error.error, _type: 'Error'}))
          else return of(ProjectActions.ApiProjectRequestFail({ data: error }))
        })
      )
    }),
  )

@Effect()
  loadTeller$: Observable<Action> = this.actions$.pipe(
    ofType(tellerActions.LOAD_TELLER),
    map((action: tellerActions.LoadTellerAction) => action.payload),
    mergeMap(officeId =>
      this.tellerService.fetch(officeId).pipe(
        map(teller => new tellerActions.LoadTellerSuccessAction(teller)),
        catchError(error => of(new tellerActions.LoadTellerSuccessAction([]))),
      ),
    ),
  );