RTKQuery 是Redux工具包中的一种新模式，专为管理API请求而设计

2024-02-09 12:13:32

RTKQuery 是什么？

RTKQuery 是Redux工具包中的一种新模式，专为管理API请求而设计。它提供了与 Redux 无缝集成、类型安全、缓存和异步状态管理等特性，可以极大地简化应用程序中API请求的管理。

RTKQuery 的优势

与 Redux 无缝集成： RTKQuery 与 Redux 紧密集成，可以在 Redux 中轻松管理 API 请求的状态。
类型安全： RTKQuery 使用 TypeScript 类型检查，可以确保API请求和响应的类型正确，防止类型错误。
缓存： RTKQuery 提供了缓存功能，可以将API请求的结果缓存起来，减少重复请求次数，提高应用程序的性能。
异步状态管理： RTKQuery 可以管理 API 请求的异步状态，包括加载中、成功和失败三种状态，便于在应用程序中处理 API 请求的状态。

RTKQuery 使用示例

安装 Redux 工具包和 RTKQuery

npm install @reduxjs/toolkit @reduxjs/rtk-query

创建 Redux store 并启用 RTKQuery

import { configureStore, createApi } from '@reduxjs/toolkit';
import { rtkQueryErrorLogger } from '@reduxjs/toolkit/query';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
  }),
});

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

使用 RTKQuery 发送 API 请求

import { useGetPostsQuery } from './api';

const Posts = () => {
  const { data, isLoading, error } = useGetPostsQuery();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};