类型 'Observable<Observable<Login>>' 不可分配给类型 'Observable<Action>'

Question

enter image description here

尝试解决此错误有任何提示吗？这是尝试执行 post 请求然后调用具有解析数据的操作的代码

export class AuthEffects {
authLoging= createEffect(
    ()=> this.actions$.pipe(
        ofType(authActions.LOGIN_START),
        switchMap((authData:authActions.LoginStart)=>
               this.http.post<authResponse>('https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=' + environment.FireBasekey,
                {
                    email: authData.payload?.email,
                    password: authData.payload?.password,
                    returnSecureToken: true
                }).pipe(map(resData => {
                    return of(new authActions.Login({
                        email: resData.email,
                        userId: resData.localId,
                        token: resData.idToken,
                        expirationDate: new Date(new Date().getTime() + +resData.expiresIn * 1000)
                    }))
                })
                )
        )
                
    )
);

constructor(private actions$: Actions , private http:HttpClient){}

}

Type 'Observable<Observable>' is not assignable to type 'EffectResult'. Type 'Observable<Observable>' is not assignable to type 'Observable'. Property 'type' is missing in type 'Observable' but required in type 'Action'.

Answer 1

当我从这里删除运算符时它会立即return一个新实例

 return of(new authActions.Login({
                    email: resData.email,
                    userId: resData.localId,
                    token: resData.idToken,
                    expirationDate: new Date(new Date().getTime() + +resData.expiresIn * 1000)
                }))

Answer 2

删除 map() 中的 of()：

}).pipe(map(resData => {
                    return new authActions.Login({

地图运算符已经将其包装在一个可观察对象中。

您还必须 return 在您的效果中执行一个操作。

另一个提示：在同一个管道中添加一个catchError，否则如果HttpCall 失败一次，您的效果将终止。

类型 'Observable<Observable<Login>>' 不可分配给类型 'Observable<Action>'

Type 'Observable<Observable<Login>>' is not assignable to type 'Observable<Action>'

angular

typescript

ngrx

effects