可观察的 <void | AuthError> &#39;不可分配给&#39;Observable类型 <Action>

Question

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'. 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);
    });
  }

Answer 1

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)))
            )
          );
      })
    )
  );