将 @Effect 转换为 createEffect NGRX

Question

我正在将 @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 }
  });

错误：

Property 'payload' does not exist on type 'never'.

Argument of type '() => { dispatch: boolean; }' is not assignable to parameter of type '() => EffectResult'.

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

Answer 1

将createAction返回的实际actionCreator传给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);
      ...
  );

将 @Effect 转换为 createEffect NGRX

Converting @Effect to createEffect NGRX

typescript

ngrx

angular