@ngrx/effects#createEffect TypeScript Examples

loadMoreOnAggregation$ = createEffect(() => {
    return this.actions$.pipe(
      ofType<RequestMoreOnAggregation>(REQUEST_MORE_ON_AGGREGATION),
      switchMap((action: RequestMoreOnAggregation) =>
        of(
          new UpdateRequestAggregationTerm(
            action.key,
            {
              increment: action.increment,
            },
            action.id
          )
        )
      )
    )
  })

pageView = createEffect(
    () => () =>
      this.router.events.pipe(
        filter((event) => event instanceof NavigationEnd),
        tap((event: NavigationEnd) => {
          (<any>window).ga('set', 'page', event.urlAfterRedirects);
          (<any>window).ga('send', 'pageview');
        })
      ),
    { dispatch: false }
  );

pageView$ = createEffect(
    () =>
      this.action$.pipe(
        ofType(routerNavigatedAction),
        tap((action) =>
          this.analytics.trackPageView(action.payload.routerState.url)
        )
      ),
    { dispatch: false }
  );

loadLanguage$ = createEffect(() => this.actions$.pipe(
        ofType(ROOT_EFFECTS_INIT, changeLanguage),
        mergeMap((action) => {
            const language = action.language || (this.cookies.hasConsent() && this.cookies.getCookie('language'))
            if (language)
                return from(this.http.get(this.I18N_FOLDER + language + '.json')).pipe(
                    map((data) => ({ type: '[App] Set language', payload: data, language }))
                )
            else
                return of({ type: '[App] English' })
        })
    ))

updateRequestAggregationTerm$ = createEffect(() => {
    const updateTermAction$ = this.actions$.pipe(
      ofType<UpdateRequestAggregationTerm>(UPDATE_REQUEST_AGGREGATION_TERM)
    )

    return updateTermAction$.pipe(
      switchMap((action) =>
        this.authService.authReady().pipe(
          withLatestFrom(
            this.store$.pipe(select(getSearchStateSearch, action.id))
          ),
          switchMap(([, state]) =>
            this.searchService.search(
              'bucket',
              JSON.stringify(
                this.esService.buildMoreOnAggregationPayload(
                  state.config.aggregations,
                  action.key,
                  state.params.filters,
                  state.config.filters
                )
              )
            )
          ),
          map((response: EsSearchResponse) => {
            const aggregations = response.aggregations
            return new PatchResultsAggregations(
              action.key,
              aggregations,
              action.id
            )
          })
        )
      ) // wait for auth to be known
    )
  })

persistSettings = createEffect(
    () =>
      this.actions$.pipe(
        ofType(
          actionSettingsChangeAnimationsElements,
          actionSettingsChangeAnimationsPage,
          actionSettingsChangeAnimationsPageDisabled,
          actionSettingsChangeAutoNightMode,
          actionSettingsChangeLanguage,
          actionSettingsChangeStickyHeader,
          actionSettingsChangeTheme
        ),
        withLatestFrom(this.store.pipe(select(selectSettingsState))),
        tap(([action, settings]) =>
          this.localStorageService.setItem(SETTINGS_KEY, settings)
        )
      ),
    { dispatch: false }
  );

loadResults$ = createEffect(() =>
    this.actions$.pipe(
      ofType(REQUEST_MORE_RESULTS),
      // mergeMap is used because of multiple search concerns
      // TODO: should implement our own switchMap to filter by searchId
      mergeMap((action: SearchActions) =>
        this.authService.authReady().pipe(
          withLatestFrom(
            this.store$.pipe(select(getSearchStateSearch, action.id))
          ),
          switchMap(([, state]) =>
            this.searchService.search(
              'bucket',
              JSON.stringify(
                this.esService.getSearchRequestBody(
                  state.config.aggregations,
                  state.params.size,
                  state.params.from,
                  state.params.sortBy,
                  state.config.source,
                  state.params.filters,
                  state.config.filters
                )
              )
            )
          ),
          switchMap((response: EsSearchResponse) => {
            const records = this.esMapper.toRecords(response)
            const aggregations = response.aggregations
            return [
              new AddResults(records, action.id),
              new SetResultsAggregations(aggregations, action.id),
              new SetResultsHits(response.hits.total, action.id),
            ]
          })
        )
      ) // wait for auth to be known
    )
  )

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}));
          })
        );
      }
    }))
  );

registerSuccess$ = createEffect(() =>
    this.actions$.pipe(ofType(registerUserSuccess),
      tap(({ user }) => {
        this.local.set('user', JSON.stringify(user));
        this.toast.success('You were successfully registered!');
        this.router.navigate([ '/' ]);
      })
    ), { dispatch: false }
  );

retrieveStock = createEffect(() => ({ debounce = 500 } = {}) =>
    this.actions$.pipe(
      ofType(actionStockMarketRetrieve),
      tap((action) =>
        this.localStorageService.setItem(STOCK_MARKET_KEY, {
          symbol: action.symbol
        })
      ),
      debounceTime(debounce),
      switchMap((action) =>
        this.service.retrieveStock(action.symbol).pipe(
          map((stock) => actionStockMarketRetrieveSuccess({ stock })),
          catchError((error) => of(actionStockMarketRetrieveError({ error })))
        )
      )
    )
  );

// connectWalletSucceeded$ = createEffect(() =>
  //   this.actions$.pipe(
  //     ofType(actions.connectWalletSuccess),
  //     map(() => actions.loadBalance())
  //   )
  // )

  disconnectWallet$ = createEffect(() =>
    this.actions$.pipe(
      ofType(actions.disconnectWallet),
      switchMap(() => {
        return this.beaconService
          .reset()
          .then(() => actions.disconnectWalletSuccess())
          .catch((error) => actions.disconnectWalletFailure({ error }))
      })
    )
  )

login$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(LoginActions.login),
      exhaustMap((action) => {
        return this.authApiService.login({
          ...action.data,
          type: 'normal',
        }).pipe(
          map(data => LoginActions.loginSuccess({ data })),
          catchError(({ error }) => of(LoginActions.loginFailure({ error })))
        );
      })
    );
  });

// TODO: add mocked positions
  onPositionLogUpdate$ = createEffect(() =>
    iif(
      () => false,
      of(
        addTradeLogs({
          tradeLogs: mockTradeLogs,
        })
      ).pipe(
        delay(500),
        tap(() => console.warn('Using MOCKED data'))
      ),
      merge(
        ...(environment.positionLogs || []).map((alias) =>
          this.firestore
            .collection('positions')
            .doc<PositionLog>(alias)
            .valueChanges()
            .pipe(
              filter((x) => !!x),
              map((pLog) =>
                addPositions({
                  alias,
                  positions: (pLog.positions || [])
                    .map((tle) => ({ ...tle, alias }))
                    .reduce((acc, val) => {
                      return acc.concat(val);
                    }, []),
                })
              )
            )
        )
      )
    )
  );

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 }
  );

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 })))
    )
  )

persistForm = createEffect(
    () =>
      this.actions$.pipe(
        ofType(actionFormUpdate),
        tap((action) =>
          this.localStorageService.setItem(FORM_KEY, { form: action.form })
        )
      ),
    { dispatch: false }
  );

signInRun$ = createEffect(() =>
  this.dataPersistence.fetch(AuthActions.signInRun, {
    id: (action, store) => this.getEffectIdFromPayload(this.getState(store).signIn),
    run: (action, store) => {
      return this.authApollo.signIn(this.getState(store).signIn).pipe(
        map<ISignAuthResponse, Action>(payload => {
          this.authStorage.setAccessToken(payload.accessToken)
          return AuthActions.signInSuccess({payload})
        })
      )
    },
    onError: (action, error) => this.errorHandler(action, error, AuthActions.signInFailure)
  })
  )

loadCollection$ = createEffect(() =>
    this.actions$.pipe(
      ofType(CollectionPageActions.enter),
      switchMap(() =>
        this.storageService.getCollection().pipe(
          map((books: Book[]) =>
            CollectionApiActions.loadBooksSuccess({ books })
          ),
          catchError((error) =>
            of(CollectionApiActions.loadBooksFailure({ 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 }
  );

logoutConfirmation$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AuthActions.logoutConfirmation),
      exhaustMap(() => {
        const dialogRef = this.dialog.open<
          LogoutConfirmationDialogComponent,
          undefined,
          boolean
        >(LogoutConfirmationDialogComponent);

        return dialogRef.afterClosed();
      }),
      map((result) =>
        result ? AuthActions.logout() : AuthActions.logoutConfirmationDismiss()
      )
    )
  );

loadUserRun$ = createEffect(() =>
    this.dataPersistence.fetch(UserActions.loadUserRun, {
      run: action =>
        this.userApollo.loadUser().pipe(
          map<IUser, Action>(payload => UserActions.loadUserSuccess({payload})),
        ),
      onError: (action, error) => this.errorHandler(action, error, UserActions.loadUserFailure),
    }),
  )

search$ = createEffect(
    () =>
      ({ debounce = 300, scheduler = asyncScheduler } = {}) =>
        this.actions$.pipe(
          ofType(FindBookPageActions.searchBooks),
          debounceTime(debounce, scheduler),
          switchMap(({ query }) => {
            if (query === '') {
              return empty;
            }

            const nextSearch$ = this.actions$.pipe(
              ofType(FindBookPageActions.searchBooks),
              skip(1)
            );

            return this.googleBooks.searchBooks(query).pipe(
              takeUntil(nextSearch$),
              map((books: Book[]) => BooksApiActions.searchSuccess({ books })),
              catchError((err) =>
                of(BooksApiActions.searchFailure({ errorMsg: err.message }))
              )
            );
          })
        )
  );

signIn$ = createEffect(() =>
    this.dataPersistence.fetch<IActionEffectPayload<IActionForcePayload>>(AuthActions.signIn, {
      run: (action, store) => {
        return isPlatformBrowser(this.platformId) && (!this.getState(store).signInRun || action.payload.force)
          ? AuthActions.signInRun()
          : AuthActions.signInCancel()
      },
      onError: (action, error) => this.errorHandler(action, error)
    }),
  )

getUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(APP_ACTIONS.GET_USERS),
      mergeMap(() =>
        this.userService.getUsers().pipe(
          map((users) => {
            return getUsersSuccess({
              users,
            });
          }),
          catchError((error) =>
            of(
              getUsersFailure({
                error,
              })
            )
          )
        )
      )
    )
  );

openFile$ = createEffect(() => this.actions$.pipe(
    ofType(openFile),
    switchMap(({file}) => {
      this.utility.openFile(file);
      return [
        setConsoleMessage({
          message: new ConsoleMessage('[OS]', `<b>Opening file:</b> <i>${ file.properties.name }</i>`)
        })
      ];
    }))
  );

removeBookFromCollection$ = createEffect(() =>
    this.actions$.pipe(
      ofType(SelectedBookPageActions.removeBook),
      mergeMap(({ book }) =>
        this.storageService.removeFromCollection([book.id]).pipe(
          map(() => CollectionApiActions.removeBookSuccess({ book })),
          catchError(() => of(CollectionApiActions.removeBookFailure({ book })))
        )
      )
    )
  );

EditUserProfile$ = createEffect(() => this.actions$.pipe(
    ofType(SettingsActions.editUserSettings),
    concatLatestFrom(() => this.store.select(selectUserProfileSettings)),
    exhaustMap(([{ userData }, userProfile]) => {
      const payload: User = { ...userProfile, ...userData };
      return this.memberService.editMember(payload).pipe(
        map(user => {
          this.toast.success('Profile was successfully updated!');
          return SettingsActions.editUserSettingsSuccess({ user });
        }),
        catchError(error => {
          this.toast.error(error);
          return of(SettingsActions.editUserSettingsFailure({ error }));
        }),
      );
    })
  ));

addBookToCollection$ = createEffect(() =>
    this.actions$.pipe(
      ofType(SelectedBookPageActions.addBook),
      mergeMap(({ book }) =>
        this.storageService.addToCollection([book]).pipe(
          map(() => CollectionApiActions.addBookSuccess({ book })),
          catchError(() => of(CollectionApiActions.addBookFailure({ book })))
        )
      )
    )
  );

LoadMember$ = createEffect(() => this.actions$.pipe(
    ofType(MemberActions.loadMember),
    mergeMap(({ id }) => {
      return this.memberService.getMemberDetails(id).pipe(
        map(user => MembersApiActions.loadMemberSuccess({ user })),
        catchError(error => of(MembersApiActions.loadMemberFailure({ error, id }))),
      );
    })
  ));