效果"AuthEffects.authLogin$"发送了一个无效的操作：未定义

Question

在Angular 6（和RxJS）应用程序中，我有一个管理登录的效果。它首先调用服务器，然后设置并解码令牌。最后，我添加了处理重定向的最后一个操作。

情况是这样的：用户（未登录）尝试访问个人资料页面。在AuthGuard中，我拦截它，并保存所需的页面（auth-guard.service.ts）：

 .. Here I already know that the user is not authenticated.
let url = state.url;
  if (url) {
       .. I save in the Store the url
       this.store.dispatch(new CoreActions.SaveRedirectUrl(url));
 }
 this.router.navigate(['/login']);
 return false;

这是Auth效果的最后两部分（Auth.effects.ts，在我发送操作DO\u登录时调用）：

, mergeMap((tokenObj: any) => {
    return [
        {
            type: AuthActions.LOGIN 
        },
        {
            type: AuthActions.SET_TOKEN,
            payload: tokenObj.token
        },
        {
            type: ProfileActions.DECODE_TOKEN,
            payload: tokenObj.token
        }
    ];
})
, exhaustMap(() => {
    return this.store.select('core')
        .pipe(
            map(coreState => {
                if (coreState.redirectUrl) {
                    this.router.navigate([coreState.redirectUrl]);
                } else {
                    this.router.navigate(['/']);
                }
                new CoreActions.RemoveRedirectUrl();
            }));
}),

因此，我正在研究这种行为：在用户登录后，我保存令牌，我（最终）重定向到所需页面，然后从状态中删除该页面。我确信第一个mergeMap（）可以工作。。当我添加最后一个部件（排气图）时，所有部件都损坏了，我无法找到控制台错误的解决方案：

ERROR错误：效果"AuthEffects.authLogin$"发送了一个无效的操作：未定义

如果我更改最后一次“返回”的位置：

this.store.select('core') -----> from here
    .pipe(
        map(coreState => {
            if (coreState.redirectUrl) {
                this.router.navigate([coreState.redirectUrl]);
            } else {
                this.router.navigate(['/']);
            }
            return new CoreActions.RemoveRedirectUrl(); -----> to here
        }));

我有一个编译错误在用尽地图（）：

类型为“（”的参数=

Answer 1

使用Angular 6和rxjs 6.0。0：

我最近在管理我的ngrx登录时遇到了类似的问题，并且遵循了与您上面描述的类似的模式。在我的$login效果中，我最初有：

@Effect()
  login$ = this.actions$.pipe(
    ofType<Login>(AuthActionTypes.Login),
    map(action => action.payload),
    exhaustMap((auth: Authenticate) =>
      this.authService.loginWithUsernameAndPassword(auth).pipe(
        map(user => {
          if (user && user.token) {
            this.cookieService.set('token', user.token)
          }
          new LoginSuccess({user})
          return user;
        }),
        catchError(error => of(new LoginFailure(error)))
      )
    )
  );

我返回了用户，这给了我一个错误，所以我放弃了它，只是尝试创建新的登录成功（{user}）。不过，这也给了我一个类似于您上面描述的错误的错误。我认为pipe（）中的map（）函数不需要副作用。我只是通过使用tap（）。一旦我这样做了，一切都按预期进行——没有错误或异常。

@Effect()
  login$ = this.actions$.pipe(
    ofType<Login>(AuthActionTypes.Login),
    map(action => action.payload),
    exhaustMap((auth: Authenticate) =>
      this.authService.loginWithUsernameAndPassword(auth).pipe(
        // user tap to set my cookie and achieve my side effect
        tap(user => {
          if (user && user.token) {
            this.cookieService.set('token', user.token)
          }
        }),
        // use map without any side effect
        map(user => new LoginSuccess({ user })),
        catchError(error => of(new LoginFailure(error)))
      )
    )
  );