NGXS - 在 switchMap 中 return of(any) 时提供了无效对象
NGXS - Provided invalid object while return of(any) in switchMap
我有一个从 firebase 的 authState 获取用户的操作。如果该用户存在,那么代码return就是与该用户相关的文档。如果不是,of(null)
将被 returned:
class 授权状态
ngxsOnInit({dispatch}: StateContext<AuthStateModel>) {
dispatch(SyncAuth);
}
@Action(SyncAuth)
syncAuth({dispatch}: StateContext<AuthStateModel>) {
return this.afAuth.authState.pipe(
switchMap(fireAuth => fireAuth ? this.authService.auth$(fireAuth.uid) : of(null)),
tap(user => dispatch(new PatchUserData(user)))
);
}
class 授权服务
auth$(userId: string): Observable<User> {
if (!userId) {
return of(null);
}
return this.db.doc$(`users/${userId}`).pipe(
map(user => user ? this.transform({...user, id: userId}) : null),
shareReplay(1)
);
}
看起来很简单吧?好吧,它不会工作,除非你的 Redux Devtools 插件打开(是的,我知道这很奇怪)。
当我想在 switchMap 运算符中 return 具有任何类型值(例如数字、字符串、null 甚至未定义)的可观察对象时,出现以下错误:
Uncaught TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. (zone.js:192)
at subscribeTo (subscribeTo.js:41)
at subscribeToResult (subscribeToResult.js:6)
at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:47)
at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:40)
at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at angularfire2.js:49
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3820)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
有问题的行在我的 AuthState
class:
// fireAuth === null
switchMap(fireAuth => fireAuth ? this.authService.auth$(fireAuth.uid) : of(null)),
但是,如果我删除 of
运算符和 return authService.auth$
可观察结果(returns of(null
),那么错误的走了:
有时候,我们非常信任我们的 IDE。有时我们不应该。我的 IDE 以这种方式导入运算符:
import { of } from 'rxjs/internals/operators';
而不是
import { of } from 'rxjs';
我有一个从 firebase 的 authState 获取用户的操作。如果该用户存在,那么代码return就是与该用户相关的文档。如果不是,of(null)
将被 returned:
class 授权状态
ngxsOnInit({dispatch}: StateContext<AuthStateModel>) {
dispatch(SyncAuth);
}
@Action(SyncAuth)
syncAuth({dispatch}: StateContext<AuthStateModel>) {
return this.afAuth.authState.pipe(
switchMap(fireAuth => fireAuth ? this.authService.auth$(fireAuth.uid) : of(null)),
tap(user => dispatch(new PatchUserData(user)))
);
}
class 授权服务
auth$(userId: string): Observable<User> {
if (!userId) {
return of(null);
}
return this.db.doc$(`users/${userId}`).pipe(
map(user => user ? this.transform({...user, id: userId}) : null),
shareReplay(1)
);
}
看起来很简单吧?好吧,它不会工作,除非你的 Redux Devtools 插件打开(是的,我知道这很奇怪)。
当我想在 switchMap 运算符中 return 具有任何类型值(例如数字、字符串、null 甚至未定义)的可观察对象时,出现以下错误:
Uncaught TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. (zone.js:192)
at subscribeTo (subscribeTo.js:41) at subscribeToResult (subscribeToResult.js:6) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:47) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:40) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at angularfire2.js:49 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:3820) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
有问题的行在我的 AuthState
class:
// fireAuth === null
switchMap(fireAuth => fireAuth ? this.authService.auth$(fireAuth.uid) : of(null)),
但是,如果我删除 of
运算符和 return authService.auth$
可观察结果(returns of(null
),那么错误的走了:
有时候,我们非常信任我们的 IDE。有时我们不应该。我的 IDE 以这种方式导入运算符:
import { of } from 'rxjs/internals/operators';
而不是
import { of } from 'rxjs';