RTK Query：相似数据结构不同端点的查询策略选择

javascript

2024-03-25 04:19:48

RTK Query：针对相似数据结构的不同端点的查询策略

引言

在使用 RTK Query 时，当多个端点具有相同的数据结构时，一个常见的问题是：应该为每个端点创建单独的查询，还是使用具有动态地址的单个查询？本篇文章将探讨这两种方法的优缺点，并帮助你根据项目需求做出明智的决定。

使用多个查询的优点

更清晰的代码： 每个端点都有专用的查询，使代码易于阅读和维护。

更好的标签： 你可以为每个端点设置单独的标签，这有助于缓存管理和错误处理。

避免不必要的请求： 如果使用单个查询，当一个端点更新时，所有端点都会发出请求。多个查询避免了这种情况。

使用单个查询的优点

避免代码重复： 通过使用具有动态地址的查询，你可以消除查询的重复代码。

更简单的缓存管理： 所有数据存储在一个缓存中，简化了缓存管理。

更好的性能： 通常，由于只需要发出一个请求，单个查询可以提高性能。

如何做出决定

在做出决定时，考虑以下因素：

端点数： 大量相似端点时，单个查询可以节省大量代码。
标签的重要性： 如果需要为每个端点使用不同的标签，则使用多个查询。
缓存策略： 如果需要对每个端点使用不同的缓存策略，则使用多个查询。
性能： 高请求负载时，多个查询可以提高性能。

示例

考虑获取不同颜色汽车数据的例子：

使用多个查询：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
  endpoints: (builder) => ({
    getGreenCars: builder.query({
      query: () => ({ url: '/api/green/cars' }),
    }),
    getBlueCars: builder.query({
      query: () => ({ url: '/api/blue/cars' }),
    }),
    getRedCars: builder.query({
      query: () => ({ url: '/api/red/cars' }),
    }),
  }),
})

使用单个查询：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com' }),
  endpoints: (builder) => ({
    getCars: builder.query({
      query: (color) => ({ url: `/api/${color}/cars` }),
    }),
  }),
})