使用 React Query 中间件简化 API 调用 - DhiWise

在API 请求可能会变得复杂。React 应用程序通常需要处理多个 API 调用、显示加载状态、处理返回数据以及处理错误。这时，React Query 中间件就显得尤为重要。它提供了一套工具，帮助开发者简化这些操作。

本文将带您通过 Redux 工具包中的 RTK Query 构建自定义中间件，从而让 API 请求的管理更加高效和便捷。

RTK Query 中间件是什么？

Redux 工具包中的 RTK Query 为 API 管理提供了一种结构化的方法。RTK Query 的中间件系统充当一个管道，在 API 请求到达服务器之前以及响应返回之后对其进行处理。

RTK Query 中的中间件功能

RTK Query 中的中间件可以拦截并处理 API 请求和响应。它们位于应用程序与 API 端点之间，提供以下功能：

请求修改：在发送请求之前对其进行修改。
响应转换：在响应到达组件之前对其进行转换。
错误处理：一致性地处理错误。
API 活动记录：记录 API 调用的活动。
身份验证支持：自动添加身份验证令牌。

通过这些功能，中间件能够显著提升 API 请求的灵活性和可维护性。

在 React 应用程序中设置 RTK Query

在深入探讨自定义中间件之前，我们需要先在 React 应用程序中设置 RTK Query。

基本设置

首先，安装必要的依赖包：

npm install @reduxjs/toolkit react-redux

接下来，创建一个 API 切片，并将 Redux 存储配置为使用默认中间件和 RTK Query 中间件。以下是一个示例代码：

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './apiSlice';

const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});export default store;

在 RTK Query 中创建自定义中间件

RTK Query 提供了强大的中间件扩展能力，允许开发者根据特定需求创建自定义中间件。以下是几个常见的用例。

身份验证中间件

身份验证是中间件的常见应用场景之一。以下代码展示了如何为每个请求自动添加身份验证令牌：

const authMiddleware = (store) => (next) => (action) => {
  if (action.type === 'api/request') {
    action.payload.headers = {
      ...action.payload.headers,
      Authorization: Bearer ${localStorage.getItem('token')},
    };
  }
  return next(action);
};

错误处理中间件

集中化的代码的可维护性。以下是一个捕获并处理 API 调用错误的中间件示例：

const errorMiddleware = (store) => (next) => (action) => {
  if (action.type.endsWith('/rejected')) {
    console.error('API Error:', action.error);
  }
  return next(action);
};

高级中间件技术

除了基础功能外，RTK Query 还支持更高级的中间件应用场景。

请求缓存和无效化

RTK Query 内置了缓存功能，但通过自定义中间件可以进一步增强。例如，当用户更新数据时，可以使相关缓存失效以触发数据刷新：

const cacheInvalidationMiddleware = (store) => (next) => (action) => {
  if (action.type === 'user/update') {
    store.dispatch(apiSlice.util.invalidateTags(['User']));
  }
  return next(action);
};

请求转换中间件

通过中间件，可以对传入和传出的请求进行转换，例如标准化日期格式或添加计算值：

const transformMiddleware = (store) => (next) => (action) => {
  if (action.type === 'api/request') {
    action.payload.body = {
      ...action.payload.body,
      timestamp: new Date().toISOString(),
    };
  }
  return next(action);
};

组合多种中间件功能

在复杂的应用程序中，可能需要同时应用多个中间件功能。以下示例展示了如何将多个中间件链接在一起：

const combinedMiddleware = [authMiddleware, errorMiddleware, cacheInvalidationMiddleware];

通过这种方式，可以灵活组合中间件以满足不同的业务需求。

中间件的实际应用示例

以下是中间件在实际项目中的一些应用场景：

加载状态管理：RTK Query 自动跟踪加载状态，便于显示加载指示器。
乐观更新：在服务器确认更改之前，中间件可以立即更新 UI，从而提升用户体验。

性能优化建议

在实现中间件时，需注意以下性能优化建议：

避免在中间件中执行繁重的计算任务。
合理使用缓存机制，减少不必要的 API 调用。
定期监控中间件的性能表现，确保其不会成为性能瓶颈。

总结

RTK Query 中间件为 React 应用程序中的 API 请求管理提供了强大的支持。通过实现自定义中间件，开发者可以集中处理身份验证、错误处理、日志记录和数据转换，从而使代码更加简洁和健壮。

RTK Query 的中间件方法简化了 API 交互的复杂性，让开发者能够专注于构建功能，而不是管理请求逻辑。通过本文介绍的技术，您可以创建更高效、更可靠的 React 应用程序。

原文链接: https://www.dhiwise.com/blog/design-converter/react-query-middleware-tidy-up-your-api-logic