登录成功后如何从ngrx效果loginEffects重定向到仪表板

Question

我正在使用 ngrx 和 ngrx 效果来实现我的登录系统。登录服务进行 api 调用，响应成功 OK。但即使 redux devtools 显示登录成功结果（如图所示），用户也不会重定向到仪表板

\n

我只是不明白为什么重定向失败。这是我的 ngrx 登录效果：

\n

import { Injectable } from "@angular/core";\nimport { Router } from \'@angular/router\';\nimport { Actions, createEffect, ofType } from "@ngrx/effects";\nimport { catchError, map, of, switchMap, tap } from "rxjs";\nimport { CurrrentUserInterface } from "src/app/shared/types/currentUser.interface";\nimport { DashbaordComponent } from "../../dashbaord/dashbaord.component";\nimport { AuthService } from "../../services/auth.service";\nimport { loginAction, loginFailureAction, loginSuccessAction } from "../actions/login.actions";\n\nexport  class loginEffect {\n    login$ = createEffect(() => this.actions$.pipe(\n        ofType(loginAction), \n        switchMap(({request}) => {\n            return this.authService.login(request).pipe(\n                map((currentUser: CurrrentUserInterface) => {\n                    return loginSuccessAction({currentUser})\n               },\n               tap(() =>this.router.navigate([\'/DashbaordComponent\']))),\n        catchError(() => {\n            return of(loginFailureAction())\n        })\n            )\n        })\n    ))\n\n    constructor(private actions$: Actions, private authService: AuthService, private router: Router){}   \n}\n

\n

\n

正如您在代码编辑器中看到的，map()带有下划线，当我将鼠标悬停在该 map() 函数上时，Visual Studio 会显示“@deprecated \xe2\x80\x94 使用闭包而不是 thisArg。接受 thisArg 的签名将在 v8 中删除”。\n在我看来，问题就在那里。我需要您的帮助来理解为什么即使 api 调用成功我也没有重定向到仪表板。

\n

根据 @AKOTECK\'ANSWER 进行编辑\n关闭 map() 上缺少的父级后，错误现在在“请求”上传递给 switchMap()，如下面的屏幕截图所示：\n

\n

当我将鼠标悬停在“request”错误上时，Visual Studio 会显示：\n" Argument of type \'({ request }: { request: LoginRequestInterface; } & TypedAction<actionTypes.LOGIN>) => OperatorFunction<unknown, known>\' 不可分配给类型为 \'(value: { request: LoginRequestInterface; } & TypedAction<actionTypes.LOGIN>, index: number) => ObservableInput\'.\nType \'OperatorFunction<unknown,unknown> 的参数\' 不可分配给类型 \'ObservableInput\'.ts(2345) "\n如下面的屏幕截图所示：

\n

\n

但请求的值来自 Submit() 函数，如片段所示：

\n

 onSubmit(): void {\n      console.log(\'Submit\', this.form.value, this.form.valid)\n      const request: LoginRequestInterface = {\n        user: this.form.value,\n\n      }\n      this.store.dispatch(loginAction({request}))\n    }\n

\n

我不明白那里的“请求”参数有什么问题。非常感谢您的帮助。

\n

Answer 1

您有语法错误。运算符的右括号map放错了位置。

return this.authService.login(request).pipe(
  map((currentUser: CurrrentUserInterface) => {
    return loginSuccessAction({currentUser})
  }), // <-- add the missing map closing parenthesis 
  tap(() =>this.router.navigate(['/DashbaordComponent'])), // <- remove the extra parenthesis from here

干杯