带ngrx的AsyncValidation

// actions.ts
export const checkUsername = createAction('[User] Check Username', props<{ username: string }>());

export const checkUsernameSuccess = createAction('[User] Check Username Success', props<{ username: string, isAvailable: boolean }>());

export const checkUsernameFailure = createAction('[User] Check Username Failure', props<{ username: string, error: any }>());

// effects.ts
@Injectable()
export class UserEffects {
  constructor(private actions$: Actions, private userService: UserService) {}

  checkUsername$ = createEffect(() =>
    this.actions$.pipe(
      ofType(checkUsername),
      exhaustMap(action =>
        this.userService.checkUsername(action.username).pipe(
          map(isAvailable => checkUsernameSuccess({ username: action.username, isAvailable })),
          catchError(error => of(checkUsernameFailure({ username: action.username, error })))
        )
      )
    )
  );
}

// reducer.ts
export const initialState = {
  usernameAvailability: {}
};

export const userReducer = createReducer(
  initialState,
  on(checkUsernameSuccess, (state, { username, isAvailable }) => ({
    ...state,
    usernameAvailability: { ...state.usernameAvailability, [username]: isAvailable }
  })),
  on(checkUsernameFailure, (state, { username, error }) => ({
    ...state,
    usernameAvailability: { ...state.usernameAvailability, [username]: false }
  }))
);