'Observable' 不可分配给类型 'EffectResult'

Question

我正在开发一个使用 angular 12 和 NGRX 的项目。

我收到这个错误：

Error: src/app/auth/state/principal.effects.ts:17:30 - error TS2345: Argument of type '() => Observable<unknown>' is not assignable to parameter of type '() => EffectResult<Action>'.
  Type 'Observable<unknown>' is not assignable to type 'EffectResult<Action>'.
    Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'.
      Type 'unknown' is not assignable to type 'Action'.

在此代码块上：

getToken$ = createEffect(() => {
    return this.actions$
      .pipe(
        ofType(PrincipalActions.login),
        switchMap(action => this.loginService.getToken(action.credentials)
          .pipe(
             map(authentication  => {alert("success from effects"); return EMPTY}),
             catchError(error => {console.log(error); return error;})
          )
      ));
  });

这是登录服务：

  export class LoginService {

     constructor(private http: HttpClient) { }

    getToken(credentials: Credential): Observable<Principal> {
       return this.http.post<Principal>(environment.baseUrl + '/login', JSON.stringify(credentials) )
    }
 }

知道为什么会出现上述错误以及如何解决吗？

Answer 1

Effect 应该 return 一个新的 Action，据我所知你的 effect 没有 return 它。如果你想在效果中做一些事情，而不派发一个新的动作，你可以将它指定为 createEffect 函数中的另一个参数。参见 Non-dispatching Effects

getToken$ = createEffect(() =>
  this.actions$.pipe(
    ofType(PrincipalActions.login),
    switchMap(action => this.loginService.getToken(action.credentials)
      .pipe(
        tap(authentication => alert("success from effects")),
        catchError(error => {console.log(error); return error;})
      )
    ),
  ), { dispatch: false});

或者用动作替换 EMPTY 和 error，如果你想用 NgRx 以某种方式处理 getToken 结果。

  map(authentication  => {
    alert("success from effects"); 
    return PrincipalActions.loginSuccess(...);
  }),
  catchError(error => {
    console.log(error); 
    return PrincipalActions.loginError(...);
  })

'Observable' 不可分配给类型 'EffectResult'

'Observable' is not assignable to type 'EffectResult'

frontend

typescript

ngrx

ngrx-effects

angular