Angular ngrx + Firebase OAuth 操作已调用但效果不

Posted 2023-02-23

【中文标题】Angular ngrx + Firebase OAuth 操作已调用但效果不

【英文标题】：Angular ngrx + Firebase OAuth action called but effect not

【发布时间】：2018-11-05 20:44:36

【问题描述】：

当我以这种效果注销时，我的 oauth 设置有问题：

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

一切正常，UserActions.GetUser() 正在被调用。现在，如果我尝试使用此效果和此 Firebase 身份验证功能登录：

@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());

新的UserActions.GetUser()被调用了，在Redux DevTools中可以看到，但是实际效果没有被调用，我在里面放了很多console.log看看是不是函数做错了，但是它根本没有被调用，而且我在GetUser 中有一个catch，但这也没有触发。

在这种情况下，firebase 有问题还是我很愚蠢？

动作：

获取用户效果：

@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();
    );

** 编辑 1

我做了一个新的观察：当没有互联网连接时，从本地加载 firebase，它实际上可以工作，不知何故，与 firebase 数据库的连接存在问题

【问题讨论】：

您能否将运行测试场景时的调度操作日志添加到您的问题中？

@ibenjelloun 已添加

您想要捕获的“获取用户”操作是否具有某种效果？

@ibenjelloun “获取用户”操作是使用从 firebase 提供的数据从我的数据库加载用户的操作。但是这个动作的效果是不会调用的。只有具有默认值的操作

你能分享一下“获取用户”操作被调度时应该调用的效果代码吗？

【参考方案1】：

尝试使用这个：

@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)))
            ))
        )

    )

为此，exhaustMap 和 switchMap 有一点区别。 如果你成功了，请告诉我。

【讨论】：

另外，这是关于排气映射和开关映射的一个很好的解释：***.com/questions/49698640/…

很遗憾，没有，完全没有效果。还是和以前一样。

您确定 loginWithGoogle 会返回一个承诺吗？你可以从 loginWithGoogle 作为 observable 返回并去掉 observable.fromPromise()。也许那里发生了一些阴暗的事情。如果您解决了问题，请告诉我如何解决。祝你好运

【参考方案2】：

你可以试试这个吗？在我看来这可能会有所帮助。

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

【讨论】：

这个根本不调用效果

@PsychoPflanze WATMAN，真的很奇怪

【参考方案3】：

我遇到了类似的问题，我认为效果没有被调用，因为在您的 getUser 效果中，如果效果抛出任何错误，您没有实现 catch 块，所以理想情况下，如果效果得到错误并且它没有任何捕获机制，效果不会为进一步的操作调用。

【讨论】：

但是我在getUser 中有一个catch 函数，它没有被调用。

@Effect() getSearchData: Observable<Action|any> = this.actions .ofType() .map() .switchMap() .mergeMap(result => return []; ) .catch(e => Observable.of(new actions.ApiError(e))) ); 通常，这就是你如何构建我的效果以使它们多次调用，如果你再次将 catch 块放在外面，它将不适用于多个操作。

我的getUser 效果就是这样构建的，但它在某种程度上与signInWithPopup 中断了

奇怪，@PsychoPflanze 现在修复了吗，你还面临同样的问题吗？

不，它仍然不起作用。我正在考虑制作自己的后端