时间戳

首页 > 解决方案 > 将 @Effect 转换为 createEffect NGRX

angular - 将 @Effect 转换为 createEffect NGRX

问题描述

我正在将@Effect（显然现在已弃用）转换为createEffect，但是我看到了一些我没有预料到的错误并且不明白为什么。

之前的效果：

  @Effect({ dispatch: false })
  LoginSuccess: Observable<any> = this.actions.pipe(
    ofType(AuthActions.SUCCESSFUL_LOGIN),
    tap((user) => {
      localStorage.setItem('jwt', user.payload.token);
      this.router.navigateByUrl('/');
    })
  );

新效果：

  loginSuccess$ = createEffect(() => {
    return this.actions.pipe(
      ofType(AuthActions.SUCCESSFUL_LOGIN),
      tap((user) => {
        localStorage.setItem('jwt', user.payload.token);
        this.router.navigateByUrl('/');
      })
    ),
    { dispatch: false }
  });

错误：

“从不”类型上不存在属性“有效负载”。

'() => { dispatch: boolean; 类型的参数 }' 不可分配给“() => EffectResult”类型的参数。

任何人都可以指出我明显的错误，我将不胜感激。

标签： angulartypescriptngrx

解决方案

传入实际actionCreator返回的createActionie ofType：

export const successfulLoginAction = createAction('[User] Login Succeeded', props<{ token: string }>());

    return this.actions.pipe(
      ofType(successfulLoginAction),
      tap((action) => {
          localStorage.setItem('jwt', action.token);
      ...

如果要使用旧式动作类，则需要将动作类型传递给ofType：

    return this.actions$.pipe(
      ofType<LoginSuccess>(AuthActions.SUCCESSFUL_LOGIN),
      tap((action) => {
        localStorage.setItem('jwt', action.payload.token);
      ...
  );

推荐阅读