时间戳

首页 > 解决方案 > NgRx 没有跳过错误时的“成功”操作

angular - NgRx 没有跳过错误时的“成功”操作

问题描述

我有这个效果：

  updateBook$ = createEffect(() =>
    this._actions$.pipe(
      ofType(START_UPDATE_BOOK),
      exhaustMap(action => this._api.updateBook({id: action.id}).pipe(
        map(data => UPDATE_BOOK({id: data.id})),
        catchError(error => of(HANDLE_ERROR({error})))
      )
    )
  ));

API服务中的这个方法：

  updateBook(id: string): Observable<any> {
    const params = {
      id
    };
    return this.httpClient
      .get<any>(`${this._host}/${this.module}/api/${this.endpoint}/Delete`, {params});
  }

但是，当给定的 ID 错误并且服务器返回 400 Bad Request 时，仍然会调用 UPDATE_BOOK 操作（不久之后会调用 HANDLE_ERROR）。为什么会发生这种情况并且没有省略 UPDATE_BOOK 操作？感谢您提供的任何帮助。

更新（我忘了为其中一个动作定义一个减速器）：动作定义如下：


export const START_UPDATE_BOOK = createAction(
  '[Books] Start update book',
  props<{id: string}>()
);

export const UPDATE_BOOK = createAction(
  '[Books] Update book',
  props<{id: string}>()
);

export const HANDLE_ERROR = createAction(
  '[Books] Handle Error',
  props<{error: string}>()
);

减速器：

const bookReducer = createReducer(initialState,
  on(START_UPDATE_BOOK),
  on(UPDATE_BOOK, (state, payload) => {
      const book: Book = state.books.find(el => el.Id === payload.id);
      book.Status = Status.PENDING;
      return {
        ...state,
      };
  }),
  on(HANDLE_ERROR, (state, payload) => {
    return {
      ...state,
      error: payload.error
    };
  })
);

标签： angularngrxngrx-effects

解决方案

这看起来很奇怪，如果你有复制品，我很乐意看看。

你能验证：

  • 服务器实际上确实返回了一个400
  • 你使用拦截器吗？如果是这样，请验证他们没有将 a 映射400到 a200

推荐阅读