Я использую эффекты ngrx и ngrx для реализации своей системы входа в систему. Служба входа в систему делает вызов API, и ответ успешно ОК. Но пользователь не перенаправляется на панель инструментов, хотя Redux devtools показывает результат успешного входа в систему, как на изображении .
Я просто не понимаю, почему перенаправление не работает. Это мой ngrx loginEffect:
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(), Visual Studio говорит: «@deprecated — используйте замыкание вместо thisArg. Подписи, принимающие thisArg, будут удалены в версии 8». Мне кажется, что проблема именно в этом. Мне нужна ваша помощь, чтобы понять, почему меня не перенаправляют на панель инструментов, хотя вызов API выполнен успешно.
РЕДАКТИРОВАТЬ НА ОСНОВЕ @AKOTECK'ANSWER После закрытия отсутствующего родителя в map() ошибки теперь по «запросу» передаются в switchMap(), как показано на снимке экрана ниже:
И когда я наводил курсор на ошибку «запрос», визуальная студия говорит: " Аргумент типа '({ request }: { request: LoginRequestInterface; } & TypedAction<actionTypes.LOGIN>) => OperatorFunction <unknown, unknown>' не может быть присвоен параметру типа '(value: { request: LoginRequestInterface; } & TypedAction<actionTypes.LOGIN>, index: number) => ObservableInput'. Тип 'OperatorFunction<unknown, unknown>' не может быть назначен типу 'ObservableInput'.ts(2345) " Как на скриншоте ниже:
Но значение запроса поступает из функции submit(), как во фрагменте:
onSubmit(): void {
console.info('Submit', this.form.value, this.form.valid)
const request: LoginRequestInterface = {
user: this.form.value,
}
this.store.dispatch(loginAction({request}))
}
Я не понимаю, что не так с параметром «запрос». Пожалуйста, ваша помощь очень ценится.
Да, @Eldar и редактор кода говорят то же самое о map(), когда я меняю tap() на switchMap(). Настоящая проблема заключается в том, что я даже не знаю, является ли подчеркнутая карта() в редакторе реальной проблемой отсутствия перенаправления после успешного входа в систему.
У вас синтаксическая ошибка. Закрывающая скобка оператора 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
ваше здоровье
Вы правы, пропал родитель. Спасибо за тщательное изучение кода. Но при исправлении ошибки закрывающей скобки появилась новая ошибка, и я соответствующим образом отредактировал вопрос. Не могли бы вы взглянуть на это? я ценю
У вас все еще слишком много закрывающих скобок в конце строки tap
.
Я просто не знаю, как сказать тебе спасибо. Вы сэкономили мое время.
Вы пытались использовать другую карту switchMap вместо тапа?