NgRx 沒有跳過錯誤時的“成功”操作

Question

我有這個效果：

  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
    };
  })
);

Answer 1

這看起來很奇怪，如果你有復制品，我很樂意看看。

你能驗證：

• 服務器確實返回了400
• 你使用攔截器嗎？ 如果是這樣，請確認他們沒有 map 400到200