使用 RTK Query 的好处：可扩展且高效的解决方案

gzq3

于 2024-07-18 02:59:00 发布

阅读量47

点赞数

文章标签： java spring 开发语言后端

作为开发人员，我们一直在寻找简化工作流程和提高应用程序性能的方法。在 React 生态系统中获得巨大关注的一个工具是 Redux 工具包查询（RTK Query）。这个库建立在 Redux Toolkit 之上，提供了一个用于管理异步数据获取和缓存的解决方案。在本文中，我们将探讨使用 RTK Query 的主要优势。

使用 RTK Query 的好处：可扩展且高效的解决方案_开发语言

使用 RTK Query 的好处：可扩展且高效的解决方案

1. 简单易用

RTK Query 最引人注目的优势之一是它的简单性。这样就可以轻松地为各种操作定义端点，例如查询数据以及创建、更新和删除资源。该方法允许您以简洁和声明性的方式定义这些终结点，从而减少样板代码并提高可读性。injectEndpoints

1
booksApi.injectEndpoints({
2


3
  endpoints: builder => ({
4


5
    getBooks: builder.query<IBook[], void | string[]>({
6


7
      // ...
8


9
    }),
10


11
    createBundle: builder.mutation<any, void>({
12


13
      // ...
14


15
    }),
16


17
    addBook: builder.mutation<string, AddBookArgs>({
18


19
      // ...
20


21
    }),
22


23
    // ...
24


25
  }),
26


27
});

2. 自动缓存和失效

RTK Query 的特点之一是其内置的缓存机制。该库会自动缓存从端点获取的数据，确保从缓存中处理对相同数据的后续请求，从而减少网络开销并提高性能。这些示例演示了 RTK Query 如何使用该选项处理缓存失效。invalidatesTags

1
createBundle: builder.mutation<any, void>({
2


3
  invalidatesTags: [BooksTag],
4


5
  // ...
6


7
}),
8


9
addBook: builder.mutation<string, AddBookArgs>({
10


11
  invalidatesTags: [BooksTag],
12


13
  // ...
14


15
}),

通过指定，RTK 查询知道在执行更改（例如，或）时要使哪些缓存条目失效，从而确保缓存保持最新并与服务器数据一致。BooksTagcreateBundleaddBook

3. 可扩展性和可维护性

随着应用程序复杂性的增加，管理异步数据提取和缓存可能变得越来越具有挑战性。RTK Query 的模块化方法和关注点分离使扩展和维护代码库变得更加容易。每个终结点都是独立定义的，因此您可以根据需要轻松添加、修改或删除终结点，而不会影响应用程序的其余部分。

1
endpoints: builder => ({
2


3
  getBooks: builder.query<IBook[], void | string[]>({
4


5
    // ...
6


7
  }),
8


9
  createBundle: builder.mutation<any, void>({
10


11
    // ...
12


13
  }),
14


15
  // ...
16


17
})

这种模块化结构促进了代码的可重用性，并使其更容易对应用程序的不同部分进行推理，从而在团队中实现更好的可维护性和协作。

4. 高效的数据获取和规范化

RTK Query 内置支持高效的数据获取和规范化。演示如何从多个源获取数据并使用该函数规范化数据。但是，可以优化当前的实现，以减少代码重复并提高可读性。下面是代码的优化版本：queryFntoSimpleBooks

1
async queryFn(collections) {
2


3
  try {
4


5
    const [snapshot, snapshot2] = await Promise.all(
6


7
      collections.map(fetchCachedCollection)
8


9
    ]);
10


11
    const success = await getBooksBundle();
12


13
    const books = success
14


15
      ? toSimpleBooks([...snapshot.docs, ...snapshot2.docs])
16


17
      : [];
18


19
    return { data: books };
20


21
  } catch (error) {
22


23
    return { error };
24


25
  }
26


27
}

在这个优化版本中，我们用于同时获取两个集合（和）。这种方法可确保我们不必等待一个集合完成提取后再开始另一个集合，从而可能减少整体提取时间。Promise.alllatest-books-1-querylatest-books-2-query

此外，我们已将调用移至块内，确保仅当成功获取集合时才执行调用。此更改有助于保持明确的关注点分离，并使代码更易于推理。getBooksBundletry

通过利用 RTK Query 的高效数据获取功能并采用最佳实践，您可以确保您的应用程序以优化和高效的方式获取和规范化数据，从而提高性能和用户体验。Promise.all

5.外露钩子的易用性

RTK Query 的突出功能之一是它通过其公开的钩子提供的易用性。最后，我喜欢导出可用的生成类型化钩子，以便您可以使用它们（即、等）与 React 组件中定义的端点进行交互。这些钩子抽象化了管理异步数据提取和缓存的复杂性，使你能够专注于构建应用程序的逻辑。useGetBooksQueryuseCreateBundleMutation

1
export const {
2


3
  useGetBooksQuery,
4


5
  useLazyGetBooksQuery,
6


7
  useCreateBundleMutation,
8


9
  useAddBookMutation,
10


11
  useDeleteBookMutation,
12


13
  useUpdateBookMutation,
14


15
} = booksApi;