I am encountering the following issues:
- Effect "AuthEffects.googleSignIn" is triggering an invalid action: [object Object]
- Uncaught TypeError: Actions must have a type property
You can view the errors below:
https://i.sstatic.net/puY3q.png https://i.sstatic.net/z8bGb.png
How can I fix this issue? The sign-in process works correctly but I need help resolving these errors:
auth.effects.ts
@Effect()
googleSignIn = this.actions.pipe(
ofType(authActions.googleSignIn),
mergeMap(() =>
from(this.authService.googleSignIn()).pipe(
map(() => this.getAuthData,
catchError(err =>
of({ error: err.message })
)
)
)
)
);
@Effect()
getAuthData = this.actions.pipe(
ofType(authActions.getAuthData),
mergeMap(() => (
this.afAuth.authState.pipe(
map((authData: AuthState) => {
if (authData) {
const parsedAuthData: Partial<AuthState> = this.authService.parseAuthData(authData);
return authActions.authDataRetrieved({ payload: parsedAuthData });
} else {
return authActions.authDataNotRetrieved();
}
}),
catchError(error => {
this.logger.debug(error);
return of(authActions.authError({ errorMessage: error.message, errorCode: error.code }));
})
)
)
)
);
auth.actions.ts
import { createAction, props } from '@ngrx/store';
import { AuthState } from './auth.state';
export const getAuthData = createAction('[Auth] Get authentication data');
export const authDataRetrieved = createAction('[Auth] Authentication data retrieved', props<{payload: Partial<AuthState>}>());
export const authDataNotRetrieved = createAction('[Auth] Authentication data not retrieved');
export const googleSignIn = createAction('[Auth] Google sign-in attempt start');
export const authError = createAction('[Auth] Authentication error occurred', props<{ errorMessage: string, errorCode: string }>());