Search code examples
javascriptangulartypescriptrxjsngrx

Observable<void | AuthError>' is not assignable to type 'Observable<Action>


I keep getting the following error: error TS2322: Type 'Observable<void | AuthError>' is not assignable to type 'Observable<Action>'. Type 'void | AuthError' is not assignable to type 'Action'. Type 'void' is not assignable to type 'Action'.

What does it mean and how can I fix it?

  googleSignIn: Observable<Action> = this.actions.pipe(
    ofType(authActions.GOOGLE_SIGNIN),
    map((action: authActions.GoogleSignIn) => action.payload),
    switchMap(() => {
      return Observable.fromPromise(this.authService.googleSignIn());
    }),
    catchError(err => {
      return Observable.of(new authActions.AuthError({ error: err.message }));
    })
  );

authService.googleSignIn()

  googleSignIn() {
    this.logger.debug('Initialising desktop Google sign in');
    const provider = new auth.GoogleAuthProvider();
    let firstName = null;
    let lastName = null;
    return this.afAuth.auth.signInWithPopup(provider).then(async (result) => {
      if (result) {
        firstName = result.additionalUserInfo.profile['given_name'];
        lastName = result.additionalUserInfo.profile['family_name'];
        const path = `/users/${result.user.uid}/`;
        const doc = await this.firebaseService.docExists(path);
        if (!doc) {
          this.userService.processNewUser(result, firstName, lastName);
        }
        if (doc) {
          this.logger.debug(`${firstName} ${lastName} is a returning desktop user`);
        }
      }
    }).catch((error) => {
      this.simpleModalService.displayMessage('Oops', error.message);
    });
  }

Solution

  • If you are using ngrx v8 you can do like this

    The problem you have is you have to return an action from you effect

     getPost$ = createEffect(() =>
        this.actions$.pipe(
          ofType(PostActions.LoadPost),
          switchMap(action => {
            return this.postService
              .getPost(action.postId)
              .pipe(
                map(
                  (post: IPost) => PostActions.LoadPostSuccess({ post }), // here is what you need to return
                  catchError(errors => of(PostActions.LoadPostFail(errors)))
                )
              );
          })
        )
      );