Effect 发送了一个无效的 action：undefined

Question

我在追查为什么会出现以下错误时遇到了一些麻烦。正在调用效果，它正在运行通过它的步骤，但它似乎无法调度成功或失败操作。

core.js:6456 ERROR Error: Effect "ProfileEffects.checkProfile$" dispatched an invalid action: undefined
at reportInvalidActions (ngrx-effects.js:213)
at MapSubscriber.project (ngrx-effects.js:281)

这是我的 checkProfile$ 效果：

public checkProfile$ = createEffect(() => {
    return this.actions$.pipe(
        ofType(loadCheckProfile),
        switchMap(() => {
            return this.authService.checkAuth().pipe(
                map((user) => {
                    if (user !== null) {
                      this.firestore.collection('users').doc(user.uid)
                      .ref
                      .get().then((doc) => {
                          if(doc.exists){
                              const profile: ProfileData = {
                                  uid: doc.data()['id'],
                              };
                               return loadCheckProfileSuccess({ data: profile });
                          } else {
                              this.router.navigate(['/']);
                              return loadCheckProfileFailure({ error: 'Failed to fetch profile'});
                          }
                      });
                    } else {
                        return loadCheckProfileFailure({ error: 'No authenticated User'});
                    }
                }),
                catchError((e) => of(loadCheckProfileFailure({ error: `${e}` })))
            );
        })
    );
});

Answer 1

发生这种情况是因为您在 Observable 中使用 promise (this.firestore.collection('users').doc(user.uid).ref.get().then(...)) 而没有等待它达到 return 值。

在类似的情况下，您需要从 promise 创建一个新的 Observable 并将其与主 Obsrvable 链接起来，您可以像下面这样在您的情况下实现:

public checkProfile$ = createEffect(() => {
    return this.actions$.pipe(
        ofType(loadCheckProfile),
        switchMap(() => {
            return this.authService.checkAuth().pipe(
                mergeMap((user) => {
                    // <<<<<< mergeMap used here to merge the new Observable with the main one.
                    if (user !== null) {
                        // >>>>> `from` is used to create an Observable from promise
                        return from(this.firestore.collection('users').doc(user.uid).ref.get()).pipe(
                            map((doc) => {
                                if (doc.exists) {
                                    const profile: ProfileData = {
                                        uid: doc.data()['id'],
                                    };
                                    return loadCheckProfileSuccess({ data: profile });
                                } else {
                                    this.router.navigate(['/']);
                                    return loadCheckProfileFailure({
                                        error: 'Failed to fetch profile',
                                    });
                                }
                            })
                        );
                    } else {
                        return of(loadCheckProfileFailure({ error: 'No authenticated User' }));
                    }
                }),
                catchError((e) => of(loadCheckProfileFailure({ error: `${e}` })))
            );
        })
    );
});

Effect 发送了一个无效的 action：undefined

Effect dispatched an invalid action: undefined

angular

firebase

google-cloud-firestore

ngrx

ngrx-effects