Question

在分派登录操作时，loginsuccess触发了两次，redux流按预期工作，我无法追踪为什么两次登录成功都会触发。我已经粘贴了完整的代码结构，并且在修复此问题上需要一些帮助。

private void FixedUpdate() {
    rigidBody.velocity = (currentMoveDirection + new Vector2(0f, rigidBody.velocity.y)).normalized * speed;
}

auth.effects.ts

auth.actions.ts
export class Login implements Action {
  readonly type = AuthActionTypes.Login;
  constructor(public payload: {login: ILogin}) {}
}

export class LoginSuccess implements Action {
  readonly type = AuthActionTypes.LoginSuccess;
  constructor(public payload: ILogin) {}
}

export class LoginFailure implements Action {
  readonly type = AuthActionTypes.LoginFailure;
  constructor(public payload: { err: any }) {}
}

auth.reducer.ts

@Effect()
  logAdd = createEffect(() => this.actions.pipe(
    ofType(AuthActionTypes.Login),
    switchMap((action: any) =>
    this.authService.loginRequest(action.payload.login)
    .pipe(map((res: any) => new LoginSuccess(res)),
      catchError(err => of(new LoginFailure({err})))
    ))),{dispatch: false}
  )
}

从login.component.ts

export interface AuthState {
  login: ILogin
}

export interface AuthPartialState {
  readonly [AUTH_FEATURE_KEY]: AuthState;
}

export const initialState: AuthState = {
  login: null
};

export function authReducer(
  state: AuthState = initialState,
  action: AuthAction
): AuthState {
  switch (action.type) {
    case AuthActionTypes.LoginSuccess: {
      state = {
        ...state,
       login: action.payload
      };
      break;
    }
  }
  return state;
}

我已附上redux devtools的屏幕截图，说明了如何触发。

如图所示，两次登录成功都附带用户名和密码。我根据ngrx 8更新了效果，但仍然面临同样的问题。

Answer 1

我看到您在ngrx v7和v8语法之间混淆了，应该只使用一种语法以避免意外行为。也许您需要像这样返回

@Effect()
  logAdd = createEffect(() => this.actions.pipe(
    ofType(AuthActionTypes.Login),
    switchMap((action: any) =>
    return this.authService.loginRequest(action.payload.login)
    .pipe(map((res: any) => new LoginSuccess(res)),
      catchError(err => of(new LoginFailure({err})))
    )))
  )
}

示例：

getPosts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PostActions.LoadPosts),
      switchMap(_ => {
        return this.postService
          .getPosts()
          .pipe(
            map(
              (posts: IPost[]) => PostActions.LoadPostsSuccess({ posts }),
              catchError(errors => of(PostActions.LoadPostsFail(errors)))
            )
          );
      })
    )
  );

Answer 2

该效果在您的示例中注册了两次，一次是使用@Effect()装饰器，第二次是使用createEffect工厂函数。

如果您删除@Effect()，则只会发送一次。

您可以利用我为防止这种情况而创建的ngrx掉毛规则-https://github.com/timdeschryver/ngrx-tslint-rules

多个动作被触发ngrx8

2 个答案: