Delay the Ngrx effect by 2 seconds before initiating the redirect

I have an ngrx effect that involves calling an HTTP method and then waiting for 2 seconds before redirecting to another page.

However, the current behavior is that it redirects immediately without waiting.

confirmRegistration$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(AuthActions.confirmRegistrationAction),
      exhaustMap((action) => {
        return this.authHttpService.confirmRegistration(action.payload).pipe(
          map((res: ConfirmRegistrationResponse) => {
            this.authService.setLocalStorageAuthToken(res.token);
            return AuthActions.confirmRegistrationSuccess(res);
          }),
          tap(interval(2000).pipe(take(1)).subscribe(_ =>
            this.router.navigate(['/dashboard'])
          )),
          catchError((error) => of(AuthActions.confirmRegistrationFailure({ error })))
        );
      })
    );
  });

Answer №1

Have you considered using the debounceTime operator instead? There may be concerns about subscribing within tap, as it's not clear how NgRx would handle that scenario.

confirmRegistration$ = createEffect(() => {
  return this.actions$.pipe(
    ofType(AuthActions.confirmRegistrationAction),
    exhaustMap((action) => {
      return this.authHttpService.confirmRegistration(action.payload).pipe(
        map((res: ConfirmRegistrationResponse) => {
          this.authService.setLocalStorageAuthToken(res.token);
          return AuthActions.confirmRegistrationSuccess(res);
        }),
        debounceTime(2000),
        tap(() => this.router.navigate(['/dashboard'])),
        catchError((error) => of(AuthActions.confirmRegistrationFailure({ error })))
      );
    })
  );
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Type arguments cannot be accepted in untyped function calls.ts(2347)

My user schema in typescript includes the following interface: interface IUser{ name: string; email: string; password: string; isAdmin: boolean; } Check out the user schema below: const UserSchema = new Schema<IUser>( { name: { type ...

Prevent unnecessary requests for asset images in Angular 5

Within my Angular application (running version 5.1.0, built with angular-cli and webpack), I have a country selector component that allows users to choose a country from a drop-down menu or by typing the name in an autocomplete field. Each matching result ...

Transform JSON into an Array and generate a new Array from a collection of Arrays

I'm struggling with generating a table in Angular2 from JSON data because I need to pivot the information, but my usual method doesn't seem to work for this scenario. Below is an excerpt of the JSON data I am working with: [ { "ValueDate" ...

Angular universal issue: 404 error code failing to function properly

After numerous attempts, I find myself at a dead end. Our Angular 11 website requires Universal for SEO purposes, and we have set up a 404 page to redirect when necessary. The issue arises when the redirect returns a status code of 200 instead of 404. To ...

Exploring ways to exclude a column in a TypeORM entity while also providing the flexibility to make it optional for retrieval using the Find method

import {Entity, PrimaryGeneratedColumn, Column} from "typeorm"; @Entity() export class User { @PrimaryGeneratedColumn() id: number; @Column() name: string; } i prefer not to include the password here as I want it to be returned to the client: ...

Ways to customize background color for a particular date?

I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...

Assigning a custom class to the cdk-overlay-pane within a mat-select component is restricted to Angular Material version 10.2.7

I attempted the code below, but it only works for angular material 11. My requirement is to use only angular material 10. providers: [ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: 'customClass' } } ] There a ...

Enigmatic Cartography Classification

In my attempt to construct a specialized Map-like class that maps keys of one type to keys of another, I encountered a challenge. A straightforward approach would be to create a Map<keyof A, keyof B>, but this method does not verify if the member typ ...

Tips on displaying the entire text when hovering over it

I'm facing an issue with a select element that retrieves options from an API. The problem is that some options are too large for the text box and get cut off, making them hard to read for users. <div class="form-group my-4"> <lab ...

What is the process for incorporating personalized variables into the Material Ui Theme?

In the process of developing a react app with TypeScript and Material UI, I encountered an issue while attempting to define custom types for my themes. The error message I received is as follows: TS2322: Type '{ mode: "dark"; background: { default: s ...

There is a compatibility issue between the module and the engine "node" in this instance

Upon running the command npx create-react-app my-awesome-react-app --template typescript, I encountered the following yarn error: Error [email protected]: The engine "node" is incompatible with this module. Expected version "^6 || ^7 || ^8 || ^9 || ^10 || ...

having issues establishing a connection between Django and Angular 2

I'm facing an issue with connecting my Angular 2 app to Django because they are running on different servers. I tried using cors but it didn't work. Any suggestions for a simple way to make the connection between them? views.py # Home Page d ...

Angular project running Karma/Jasmine tests encounters failures when run on GitHub Action using Google Chrome on Ubuntu operating system

While working on my Angular project, I encountered an issue when trying to test it using Google Chrome with Karma & Jasmine in a GitHub Action. Google Chrome starts with multiple errors and eventually crashes after running some tests. Despite trying vario ...

Obtain unfinished designs from resolver using GraphQL Code Generator

In order to allow resolvers to return partial data and have other resolvers complete the missing fields, I follow this convention: type UserExtra { name: String! } type User { id: ID! email: String! extra: UserExtra! } type Query { user(id: ID! ...

Circular dependency situation encountered in Angular 2 shared module

I'm currently working on a share module setup that is structured as follows: @NgModule({ exports: [ CommonModule, HttpModule, OneModule, TwoModule ] }) export class SharedModule { } The OneModule imports the SharedModule in order ...

When the appdir is utilized, the subsequent export process encounters a failure with the error message "PageNotFoundError: Module for page /(...) not

I have implemented NextJS with the experimental appDir flag and organized my pages in the following manner: https://i.stack.imgur.com/M7r0k.png My layout.tsx file at the root and onboard look like this: export default function DefaultLayout({ children }) ...

Effective ways to request verification prior to eliminating an item with ng-select (multi-select)

https://i.stack.imgur.com/HDtXq.jpg Is it possible to add a confirmation prompt when deleting an item from a select component? I couldn't find any specific prop for the component. Is there any way to customize or override the delete function? ...

Ways to eliminate the lower boundary of Input text

Currently, I am working on a project using Angular2 with Materialize. I have customized the style for the text input, but I am facing an issue where I can't remove the bottom line when the user selects the input field. You can view the red line in t ...

What are the best practices for integrating RxJS into Angular 2 projects?

How can I write code like this in Angular 2? var closeButton1 = document.querySelector('.close1'); var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click'); I have attempted various methods to incorporate this into an An ...

While attempting to reinstall the admob-free plugin via npm, I encountered an error stating that it was missing a package.json file

While developing an app using Ionic, I encountered an issue with the AdMob plugin not being installed correctly. Trying to resolve this, I attempted to reinstall the plugin multiple times but kept running into errors. Seeking help from various threads, I ...