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

Question

我正在使用 ngrx 和 ngrx 效果来实现我的登录系统。登录服务发出 api 调用，响应成功。但是，即使 redux devtools 显示登录成功结果如图

，用户也不会被重定向到仪表板

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

import { Injectable } from "@angular/core";
import { Router } from '@angular/router';
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { catchError, map, of, switchMap, tap } from "rxjs";
import { CurrrentUserInterface } from "src/app/shared/types/currentUser.interface";
import { DashbaordComponent } from "../../dashbaord/dashbaord.component";
import { AuthService } from "../../services/auth.service";
import { loginAction, loginFailureAction, loginSuccessAction } from "../actions/login.actions";

export  class loginEffect {
    login$ = createEffect(() => this.actions$.pipe(
        ofType(loginAction), 
        switchMap(({request}) => {
            return this.authService.login(request).pipe(
                map((currentUser: CurrrentUserInterface) => {
                    return loginSuccessAction({currentUser})
               },
               tap(() =>this.router.navigate(['/DashbaordComponent']))),
        catchError(() => {
            return of(loginFailureAction())
        })
            )
        })
    ))

    constructor(private actions$: Actions, private authService: AuthService, private router: Router){}   
}

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

根据@AKOTECK'ANSWER 编辑 在 map() 上关闭丢失的父级后，错误现在 'request' 传递给 switchMap() ，如下面的屏幕截图所示：

当我将鼠标悬停在 'request' 错误上时，visual studio 说： “'({ request}: { request: LoginRequestInterface; } & TypedAction) => OperatorFunction' 类型的参数不可分配给 '(value: { request: LoginRequestInterface ; } & TypedAction, index: number) => ObservableInput'. 类型 'OperatorFunction<unknown, unknown>' 不可分配给类型 'ObservableInput'.ts(2345) “ 如下图所示：

但是请求的值来自代码片段中的 submit() 函数：

 onSubmit(): void {
      console.log('Submit', this.form.value, this.form.valid)
      const request: LoginRequestInterface = {
        user: this.form.value,

      }
      this.store.dispatch(loginAction({request}))
    }

我不明白那里的 'request' 参数有什么问题。非常感谢您的帮助。

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

干杯

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

How to redirect from ngrx effects loginEffects to dashboard after login success

angular

rxjs

ngrx-effects