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

Assigning string properties to different types

I have numerous data types, each with a common property called dataType, and I am currently mapping each one to that specific value: interface GroupData { dataType: "group"; name: string; people: PersonData[]; } interface PersonData ...

Enhancing State Management with CombineReducers in TypeScript

export const rootReducer = combineReducers({ login: loginReducer, }); Everything is working fine with the current setup, but I encountered an issue when attempting to combine another reducer: export const rootReducer = combineReducers({ login: lo ...

Interacting with a form input by triggering the onChange event

I am encountering a problem where I need to be able to select a radio button both onChange via keydown and mouse click. However, I am struggling with accessing both event parameters of the on keydown and on mouse click within the same function. As a result ...

The Angular 5 keyup event is being triggered twice

My app is incredibly simple, just a basic hello world. To enhance its appearance, I incorporated bootstrap for the design and ng-bootstrap for the components. Within one of my TS files, you will find the following code: showMeTheKey(event: KeyboardEvent) ...

Loop through a collection of objects in Angular 2

Upon subscribing to an array of objects received from a JSON file in the service file, I encountered an error while trying to iterate through it. The error message I received was: EXCEPTION: Error in app/dashboard/features/fleet/fleetControlPanel/fleetCon ...

What could be causing my Cypress 12.12 configuration file to be deemed incorrect when working with Angular 16?

I encountered an issue while executing npx cypress open: export default defineConfig({ | ^ 5 | e2e: { 6 | setupNodeEvents(on, config) { 7 | // implement node event listeners here 8 | }, Error Messag ...

Where can I find the @types for a specific lodash package?

Seeking to utilize a specific function from lodash - assignin. I have successfully installed lodash.assignin and incorporated it into my project: import assignIn = require('lodash.assignin'); However, when compiling, an error occurs: "error TS2 ...

What is the best way to assign a value to an option element for ordering purposes?

My select element is being populated with fruits from a database, using the following code: <select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel"> <option *ngFor="let fruit of fruits">{{fruit}}</option> </selec ...

Tips on using Visual Studio Code to troubleshoot Angular 4 unit tests

I am working on an Angular 4 project with Material design in Visual Studio Code. The setup is done using angular/cli. Currently, I have been writing unit tests using Karma and Jasmine. However, when trying to debug the tests by setting breakpoints, it doe ...

Navigating to the root of a child component in Angular2 routing can be achieved by using the Router

In the App.ts file, I have configured the following router: @RouteConfig([ {path: '/', redirectTo: ['Login']}, {path: '/login', name: 'Login', component: LoginComponent}, {path: '/dashboard', n ...

TypeScript declaration: discovering modules and defining namespaces

I'm currently in the process of creating a declaration file for h3. For guidance, you can refer to the function available here. Initially, I'm unsure of how typescript identifies declaration files. It seems to detect my declaration when placed ...

Running Jenkins in a Docker container to initiate the process of building an Angular application within a

Recently, I began my journey of learning Jenkins and successfully launched it on Docker. Now, I have a project built in Angular along with a Dockerfile created to produce a Docker image. However, when attempting to start the process from Jenkins, an erro ...

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

Creating an Angular material modal that uses a component wrapper and takes a component as a parameter

Currently, I am in the process of developing a dialog service that will showcase a wrapper component whose parameter is a component to be displayed as the content of the wrapper. open(component: any | TemplateRef<any>, params, viewMode: ViewMode = V ...

Issue with Angular click functionality not triggering on SVG icons within input elements

I'm currently facing an issue with my Angular project using Tailwind. I have SVG icons alongside my input, but unfortunately, they are not clickable. I've tried wrapping them in a div and adding cursor-pointer, but nothing seems to work. ...

Iterate through a collection of objects and organize the data in a specific way

Within the data structure of my API response, I am attempting to iterate through an array of objects under the items key. Each value inside these objects needs to be formatted based on the corresponding format type specified in the header key. To assist wi ...

Creating React components with TypeScript: Defining components such as Foo and Foo.Bar

I have a react component defined in TypeScript and I would like to export it as an object so that I can add a new component to it. interface IFooProps { title:string } interface IBarProps { content:string } const Foo:React.FC<IFooProps> = ({ ...

Adding a row with sorting order in AG Grid explained

Recently, I encountered an issue where rows added to the ag grid were not being sorted and instead always appeared at the bottom of the grid. I am looking to add rows with sorting order. Here is an example of what is currently happening: Actual results: ...

Before fetching the data from firebase in Angular 2, it is crucial to ensure that the code is properly

I'm facing an issue when trying to retrieve data from Firebase. It successfully retrieves the data, but it takes a few seconds to do so. In the meantime, the code continues running and the variable's value becomes null. Why is this happening? Is ...

Building a React TypeScript project is successful on Windows, but encounters issues when attempted on a

Currently, I am immersed in a project that involves React TypeScript. Here is the content of the package.json: { "version": "0.1.0", "private": true, "dependencies": { ///... "react": "^16.8.6", "react-scripts-ts": "3.1.0", }, "scri ...