我有一个史诗,我正在收听动作流,当'AUTH_STATUS_CHECKED'
的动作发生时切换到新的可观察authState(app.auth())
。这个新的可观察量告诉我我是否经过身份验证。
如果身份验证可观察量返回用户,则以用户作为有效负载调度'SIGNED_IN'
操作。
如果用户不存在,则预先关闭承诺app.auth().signInWithPopup(googleAuthProvider)
,并在获得响应时调度'SIGNED_IN'
。
如果有任何错误,请捕获它们并在控制台中告诉我。
基于上面的逻辑,我实现了下面的管道
export const fetchAuthStatus = action$ =>
action$.pipe(
ofType('AUTH_STATUS_CHECKED'),
switchMap(() =>
authState(app.auth()).pipe(
map(user =>
user
? { type: 'SIGNED_IN', payload: user }
: app
.auth()
.signInWithPopup(googleAuthProvider)
.then(user => ({ type: 'SIGNED_IN', payload: user }))
),
catchError(error => console.log('problems signing in'))
)
)
);
它没有按预期工作。如果没有用户,承诺将被触发,但它不会等待响应,并且调度永远不会被触发。
我显然是 rxjs 的新手,我很难弄清楚这一点。我已经浏览了文档并尝试使用 tap(( 和 mergeMap((,但遇到了同样的错误。
任何指导将不胜感激。
但是,您的代码可以稍微优化一下,并建议以更好的方式进行优化,您在这里缺少的是map
期望一个普通对象,而switchMap
期望一个Promise
或Observable
的对象。
const signIn = (authProvider) => app.auth().signInWithPopup(googleAuthProvider)
.then(user => ({ type: 'SIGNED_IN', payload: user }));
export const fetchAuthStatus = action$ =>
action$.pipe(
ofType('AUTH_STATUS_CHECKED'),
switchMap(() => authState(app.auth())),
switchMap(user => user // <-- switchMap handle Promises or Observables
? of({ type: 'SIGNED_IN', payload: user }) // <-- returning an observable
: signIn(googleAuthProvider) // <-- returning a promise
),
catchError(error => console.log('problems signing in'))
);
笔记:
- 不要嵌套管道操作员,尽量使用一根管道
- 提取 Rx 流之外的复杂方法
- 使用
of
运算符将普通对象转换为可观察对象
如果你需要等到一些内部的可观察/承诺完成,你需要用 eg 包装它。 mergeMap
或concatMap
.由于这两个运算符都要求您返回可观察量/承诺,因此您必须用of()
包装操作才能将普通对象转换为可观察对象:
import { of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
...
mergeMap(user => user
? of({ type: 'SIGNED_IN', payload: user })
: app.auth().signInWithPopup(googleAuthProvider)...
)