angular - 如何使用ngrx效果显示从spring rest api到角度组件的异常消息？

Question

我有一个 angular 8 的示例应用程序 spring boot，我试图显示从 rest api 接收到的异常消息到 angular 应用程序。但我不知道如何通过组件订阅和显示。

这是我的

component.ts 代码

constructor(private store: Store<ApplicationState>) {}

this.store.dispatch(new SaveApplicationUserAction(applicationUser));
var err = this.store.select(s => s.applicationUsers.applicationUsers);
console.log(err);

我正在调度SaveApplicationUserAction使用 ngrx 配置的操作

action.ts 代码

export class SaveApplicationUserAction implements Action {
    readonly type = SAVE_APPLICATION_USER;

    constructor(public payload: ApplicationUser) { }
}

export class SaveApplicationUserSuccessAction implements Action {
    readonly type = SAVE_APPLICATION_USER_SUCCESS;

    constructor(public payload: ApplicationUser) { }
}

export class HttpErrorAction implements Action {
    readonly type = HTTP_ERROR;

    constructor(public payload: string) { }
}

effects.ts 代码

@Effect()
        saveApplicationUser$ = this.actions$.pipe(
            ofType(actions.SAVE_APPLICATION_USER),
            exhaustMap((action: actions.SaveApplicationUserAction) =>
            this.userService.saveApplicationUser(action.payload).pipe(
                // user tap to set my cookie and achieve my side effect
                tap(user => {
                    console.log(user);
                }),
                // use map without any side effect
                map((user: any) => new actions.SaveApplicationUserSuccessAction(user)),
                catchError(error => of(new actions.HttpErrorAction(error))
            )
            )
            )
        );

reducer.ts 代码

class ApplicationUserState {
        applicationUsers: ApplicationUser[];
        applicationUser: ApplicationUser;
        hasError: boolean;
        errMessage: string;
}
const initialState: ApplicationUserState = {
    applicationUsers: [],
    applicationUser: null,
    hasError: false,
    errMessage: null
};

export function applicationUserReducer(state = initialState, action: formActions.ApplicationUserActions) {
    console.log(state);
    switch (action.type) {
        case formActions.SAVE_APPLICATION_USER_SUCCESS: {
            return state = {
                applicationUsers: [...state.applicationUsers, action.payload],
                applicationUser: action.payload,
                hasError: state.hasError,
                errMessage: state.errMessage
            };
        }
        case formActions.HTTP_ERROR: {
            const httpErrorAction :formActions.HttpErrorAction = action as formActions.HttpErrorAction;
            return Object.assign({}, state, {error: httpErrorAction.payload});
        }
        default: {
            return state;
        }
    }
  }

我发生了一个异常，所以我ResponseEntity从 spring rest api返回一个

if(ex.getMessage().contains("ConstraintViolationException")) {
                return new ResponseEntity<>(new ResponseMessage(ex.getMessage()), HttpStatus.NOT_FOUND);
            }

我不知道如何检查 http 的状态代码以及如何通过使用 ngrx 效果、动作和减速器的组件向前端用户显示异常消息。任何人都可以帮助我解决这个问题或任何建议或链接来参考。

标签： angularrestspring-bootngrx-store