登录成功后如何从ngrx效果loginEffects重定向到仪表板
How to redirect from ngrx effects loginEffects to dashboard after login success
我正在使用 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' 参数有什么问题。非常感谢您的帮助。
您有语法错误。 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 和 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
但是请求的值来自代码片段中的 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' 参数有什么问题。非常感谢您的帮助。
您有语法错误。 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
干杯