如何使用 Redux Toolkit 和 RTKQuery 设置 404 或 500 错误处理程序

Question

我使用RTKQuery来获取数据，如下所示：

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders,
  }),
  tagTypes: ['Products'],
  keepUnusedDataFor: 8600,
  endpoints: builder => ({
    getProperties: builder.query<IProduct[], IParams>({
      query: params => ({ url: 'products', params: { per_page: 40, ...params } }),
      transformResponse: ({ data }: { data: IProduct[] }) => data,
      providesTags: ['Products'],
    }),
  });

我对 Redux Toolkit 比较陌生，在使用任何 Redux 之前直接开始使用它。从 ReduxToolkit 文档中，我找到了两种在后端捕获和放置操作的方法。

1. 使用异步重击。
2. 中间件

我尝试使用中间件方法使用如下代码：

export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => next => action => {
  if (isRejected(action)) {
     console.log(action);
  }
  return next(action);
}

但这并不能捕获 40x/50x 错误。应该用什么方法来处理这个问题？

目的是在使用元信息捕获这些错误后将日志发送到服务器。我正在关注：https://redux-toolkit.js.org/rtk-query/usage/error-handling#handling-errors-at-a-macro-level作为参考。

Answer 1

一年多后，我正在研究这个问题。我认为中间件方法是好的，但你也可以使用自定义的方法baseQuery。您的具体情况似乎还有其他需要调试的事情，但您没有为此提供足够的信息。

我认为 RTKQuery 的文档是错误的：isRejected是一个需要 thunk 作为参数的高阶函数。这也适用于其他匹配器，例如isRejectedWithValue.

我相信，要检查任何被拒绝的操作，您的中间件应该如下所示，即使没有明确记录。

export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => next => action => {
  if (isRejected()(action)) {
     console.log(action);
  }
  return next(action);
}

当然还要记住将中间件添加到商店创建者中。

另请参阅官方文档https://redux-toolkit.js.org/api/matching-utilities#isrejected

被拒绝

一个高阶函数，返回一个类型保护函数，可用于检查某个操作是否是 createAsyncThunk Promise 生命周期中“被拒绝”的操作创建者。

被拒绝使用

import { isRejected } from '@reduxjs/toolkit' import type { AnyAction
} from '@reduxjs/toolkit' import { requestThunk1, requestThunk2 } from
'@virtual/matchers'

const isARejectedAction = isRejected(requestThunk1, requestThunk2)

function handleRejectedAction(action: AnyAction) {   if
(isARejectedAction(action)) {
    // action is a rejected action dispatched by either `requestThunk1` or `requestThunk2`   } }