Angular ngrx + Firebase OAuth action called but effect not

Question

i have an issue with my oauth setup, when i logout with this effect:

@Effect()
  logout:  Observable<Action> = this.actions.ofType(UserActions.LOGOUT)
    .switchMap(() => Observable.of(this.afAuth.auth.signOut()))
    .map(() => new UserActions.GetUser())
    .catch(err => Observable.of(new UserActions.AuthError({error: err.message})));

Everything works fine and the UserActions.GetUser() is being called. Now if i try to log in with this effect and this firebase auth function:

@Effect()
  googleLogin: Observable<Action> = this.actions.ofType(UserActions.GOOGLE_LOGIN)
    .switchMap(() => Observable.fromPromise(this.loginWithGoogle()))
    .map(() => new UserActions.GetUser())
    .catch(err => Observable.of(new UserActions.AuthError({error: err.message})));

private loginWithGoogle() {
  return this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}

The new UserActions.GetUser() is called and i can see it in the Redux DevTools, but the actual effect is not called, i put a lot of console.log's in there to see if i did something wrong in the function, but it isn't called at all and also i have a catch in the GetUser, but that's also not triggering.

Is there some issue with firebase in this case or am i stupid?

Actions:

Get User effect:

@Effect()
  getUser: Observable<Action> = this.actions.ofType(UserActions.GET_USER)
    .switchMap(() => {
      console.log('test'); // <-- Not called
      return this.afAuth.authState;
    })
    .map(()=> {
      return new UserActions.Authenticated();
    });

** EDIT 1

I made a new observation: When there is no internet connection anymore, so firebase loads from local, it actually works, somehow there is an issue with the connection to the firebase database

Can you add the dispatched actions log when running your test scenario to your question ? — ibenjelloun, Jun 01 '18 at 09:41
Is the "Get user" action that you want to catch in some effect ? — ibenjelloun, Jun 01 '18 at 11:16
@ibenjelloun The "Get user" action is what loads the user from my database with the data given from firebase. But the effect of this action is not called. Only the action with the default values — Leon Marzahn, Jun 01 '18 at 11:19
Could you share the code of the effect that is supposed to be called when the "Get user" action is dispatched ? — ibenjelloun, Jun 01 '18 at 11:20
@ibenjelloun Doesn't matter, it isn't called. But is called on reload where i call it manually — Leon Marzahn, Jun 01 '18 at 11:21
Last dumb question, is the `"GetUser"` type equal to `"[USER] Get user"` ? The `"[USER] Google Login"` has a capital lettre on the "L", maybe the type is `"[USER] Get User"`. — ibenjelloun, Jun 01 '18 at 11:48
Yes, the naming doesn't matter i thnk. I have a const i am using anyway: `export const GET_USER = '[USER] Get user';` — Leon Marzahn, Jun 01 '18 at 11:56

m.akbari · Answer 1 · 2018-05-30T12:07:37.353

0

try to use this one:

@Effect()
googleLogin: Observable<Action> = this.actions.pipe(

        ofType(UserActions.GOOGLE_LOGIN),
        map(action => action.payload), // if there is no payload disregard this
        exhaustMap((auth: any) => Observable.fromPromise(this.loginWithGoogle()
               .pipe(
                  map(() => new UserActions.GetUser()),
                  catchError(err => Observable.of(new UserActions.AuthError({error: err.message})))
            ))
        )

    )

for this a little difference between exhaustMap and switchMap. let me know if you succeed to work it.

edited May 30 '18 at 12:07

answered May 30 '18 at 10:57

m.akbari

572
8
22

also, this is a nice explanation regarding exhaustMap and switchMap: https://stackoverflow.com/questions/49698640/flatmap-mergemap-switchmap-and-concatmap-in-rxjs/49723075#49723075 – m.akbari May 30 '18 at 11:00
Unfortunately no, no effect at all. Still the same behaviour as before. – Leon Marzahn May 30 '18 at 18:46
Are you sure loginWithGoogle returns a promise? you can return from loginWithGoogle as observable and get rid of observable.fromPromise(). maybe something shady happens in there. if you resolve the problem please let me know how. good luck – m.akbari May 31 '18 at 07:51

score 0 · Answer 2 · answered Jun 03 '18 at 16:21

0

can you try this one? It might help in my opinion.

  @Effect()
  googleLogin = this.actions.ofType(UserAction.GOOGLE_LOGIN).pipe(
    map(() => Observable.fromPromise(this.loginWithGoogle()),
    mergeMap(()=> return[{type: UserActions.GET_USER}])
  );

answered Jun 03 '18 at 16:21

Maciej Wojcik

2,115
2
28
47

This one doesn't call the effect at all – Leon Marzahn Jun 03 '18 at 17:03
@PsychoPflanze WATMAN, it's really strange – Maciej Wojcik Jun 04 '18 at 10:47

score 0 · Answer 3 · answered Jun 06 '18 at 04:34

0

I ran into a similar issue, I think the effect is not being called because in your getUser effect you are not implementing catch block if the effect throws any error, so ideally in this case if an effect gets an error and it doesn't have any catch mechanism the effect won't invoke for further actions.

answered Jun 06 '18 at 04:34

Jaya Krishna

313
4
14

But i have a catch function in `getUser`, and it doesn't get called. – Leon Marzahn Jun 06 '18 at 08:09
`@Effect() getSearchData: Observable = this.actions .ofType() .map() .switchMap() .mergeMap(result => { return []; }) .catch(e => Observable.of(new actions.ApiError(e))) );` Usually, this is how u frame my effects to get them invoked multiple times, if you keep the catch block outside again it won't work for multiple actions. – Jaya Krishna Jun 06 '18 at 08:38
My `getUser` effect is built exactly like that, but it somehow breaks with `signInWithPopup` – Leon Marzahn Jun 06 '18 at 13:07
strange, @PsychoPflanze is it fixed now, are you still facing the same. – Jaya Krishna Jun 08 '18 at 13:53
No, it still doesn't work. I am thinking about making my own backend – Leon Marzahn Jun 09 '18 at 14:52

Angular ngrx + Firebase OAuth action called but effect not

3 Answers3