I am a little novice with the use of Rxjs and Ngrx and I have a problem that whenever an authentication error occurs the alert()
is displayed with the error message returned from Firebase.
The problem is that when the error occurs I just want to display a message with the error ... it goes into an infinite loop and the memory usage increases and I'm forced to close the application.
When I enter the email and password correctly, the application behaves the right way ... The problem occurs whenever a Firebase error is returned.
The infinite loop does not occur if I do not create an Effect()
for AUTH_ERROR
... and I get the error in the application state viewed Redux DevTools.
@Effect()
loginWithEmailPassword: Observable<Action> = this._actions.pipe(
ofType(authActions.LOGIN_EMAIL_PASSWORD),
map((action: authActions.LoginEmailPassword) => action.payload),
switchMap(data => from(this._angularFireAuth.auth
.signInWithEmailAndPassword(data.email, data.password)).pipe(
switchMap(response => forkJoin([
from(response.user.getIdTokenResult(true)),
of(response.user)
])),
map(([token, user]) => {
if (user) {
this._router.navigate(['']);
return new authActions.Authenticated({
admin: token.claims.admin,
profissional: token.claims.profissional,
assinante: token.claims.assinante,
firestoreCollection: token.claims.firestoreCollection,
user: user
});
}
}),
catchError((error) => of(new authActions.AuthError({ error: error })))
))
)
@Effect()
authError$: Observable<Action> = this._actions.pipe(
ofType(authActions.AUTH_ERROR),
tap(action => alert(action.payload.error.message))
)
To solve this problem, I passed as dispatch parameter as false.
@Effect({ dispatch: false })
authError$: Observable<Action> = this._actions.pipe(
ofType(authActions.AUTH_ERROR),
tap(action => alert(action.payload.error.message))
)