Problem with ngrx while tried to login with correct username and password

I am trying to create a login page. I am using angular with ngrx for state management.

login.action.ts

import { createAction, props } from "@ngrx/store";


export const loginRequest = createAction(
'[Login] Login Request',
props<{ credential: { emailId: string; password: string }}>()
)

export const loginSuccess = createAction(
'[Login] Login Success',
props<{ loginResponse: string }>()
)

export const loginFailure = createAction(
'[Login] Login Failuer',
props<{ error: string }>()
)


login.effect.ts

import { inject, Injectable } from "@angular/core";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { AccountService } from "../../_services/account.service";
import { Router } from "@angular/router";
import * as AuthActions from '../actions/login.action';
import { catchError, exhaustMap, map, of, tap } from "rxjs";

Injectable()

export class AuthEffects {

private actions$ = inject(Actions);
private authService = inject(AccountService);
private router = inject(Router);

loginRequest$ = createEffect(() =>
this.actions$.pipe(
ofType(AuthActions.loginRequest),
exhaustMap((action) =>
this.authService
.login({userName: action.credential.emailId, password: action.credential.password})
.pipe(
map((loginResponse) => AuthActions.loginSuccess({loginResponse: loginResponse.firstName})),
catchError((error) => of(AuthActions.loginFailure({error: error.message})))
)
)
)
);

loginSuccess$ = createEffect(
() =>
this.actions$.pipe(
ofType(AuthActions.loginSuccess),
tap(({ loginResponse }) => {
this.router.navigateByUrl('/register');
})
)
);
}


login.reducer.ts

import { Action, createReducer, on } from "@ngrx/store";
import { LoginResponse } from "../../_models/LoginResponse";
import * as AuthActions from '../actions/login.action';

const initialAuthState: LoginResponse = {
username: "",
firstName: "",
token: "",
lastName: "",
photoUrl: ""
};

export const _authReducer = createReducer(initialAuthState,
on(AuthActions.loginRequest, state => ({...state, isLoading: true, error: null})),
on(AuthActions.loginSuccess, (state, { loginResponse }) => ({ ...state, isLoading: false, loginResponse })),
on(AuthActions.loginFailure, (state, { error }) => ({...state, isLoading: false, error}))
);

export function authReducer(state: LoginResponse | undefined, action: Action)
{
console.log('State: ', state);
console.log('Action: ', action);
return _authReducer(state, action);
}


My problem is when I tried to login with valid username and password login success effect is not getting called and the state is not getting changed. When I checked the console logs I saw that login success reducer is not mapped the action and it becomes an infinite loop. This is the log reference

I don't know where I am doing wrong. I am new in this ngrx framework.

Version Which I have used:

Angular: 18.2.0 Ngrx: 18.0.2 Version details

Expectation is once successful login happened the state should changed with proper details from database

Continue reading...