NgRx 不跳过 'successful' 错误操作

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 错误并且服务器 returns 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

好像很奇怪，如果你有复制品我很乐意看一下。

你能验证一下吗：

服务器实际上 return 400
你使用拦截器吗？如果是这样，请确认它们没有将 400 映射到 200

NgRx 不跳过 'successful' 错误操作

NgRx not skipping 'successful' action on error

ngrx

ngrx-effects

angular