使用 Redux RTK 查询提升应用程序的性能🚀

最近，我有机会广泛使用 **Redux RTK Query**，让我告诉你——它改变了我在 React 应用程序中管理数据获取和缓存的方式。如果您尚未使用 RTK Query，那么您就错过了一个强大的工具，它可以简化您的代码并增强应用程序的性能。

在这篇文章中，我将分享我的经验，重点介绍该存储库中的一些实际示例，并解释何时有效地使用**查询**和**变异**。

为什么要进行 RTK 查询？

RTK Query 是 Redux Toolkit 的一部分，它简化了以下流程：

从 API 获取数据。

缓存和同步服务器状态。

处理乐观更新以获得快捷的 UI 体验。

当我集成 RTK Query 时，**自动缓存机制**显著减少了冗余 API 调用。这不仅提高了应用程序性能，还简化了状态管理。

主要特点

自动缓存：告别手动缓存逻辑。

减少样板：无需编写单独的操作或减速器。

乐观更新：等待服务器确认时立即更新 UI。

高效重新获取：有选择地使缓存无效以保持数据新鲜。

何时使用查询和变更

查询

使用查询来**读取**或获取数据。例如：

显示用户、帖子或产品列表。

获取单个实体的详细信息。

以下是获取帖子的查询示例：

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

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080/' }), // base URL of your backend service
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
  }),
});

export const { useGetPostsQuery } = api;

在组件中使用钩子：

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

  if (isLoading) return Loading...;

  return (
    
      {posts.map((post) => (
        {post.title}
      ))}
    
  );
};

突变

使用变更来**创建、更新或删除**数据。例如：

添加新用户。

更新产品详细信息。

删除帖子。

以下是添加新帖子的变异示例：

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080/' }), // base URL of your backend service
  endpoints: (builder) => ({
    addPost: builder.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
});

export const { useAddPostMutation } = api;

在组件中使用突变：

const AddPost = () => {
  const [addPost] = useAddPostMutation();

  const handleAddPost = async () => {
    await addPost({ title: 'New Post', content: 'This is a new post.' });
  };

  return ;
};

缓存实际应用

内置的缓存机制在我最近的项目中起到了救星作用。例如，当用户添加新帖子时，缓存会自动更新，避免了重新获取所有帖子的需要。

RTK 查询如何帮助解决缓存失效问题：

endpoints: (builder) => ({
  addPost: builder.mutation({
    query: (newPost) => ({
      url: '/posts',
      method: 'POST',
      body: newPost,
    }),
    invalidatesTags: [{ type: 'Posts', id: 'LIST' }],
  }),
  getPosts: builder.query({
    query: () => '/posts',
    providesTags: [{ type: 'Posts', id: 'LIST' }],
  }),
});

通过此设置，添加新帖子会自动触发重新获取帖子列表，确保 UI 保持最新。

性能提升

集成 RTK 查询后：

由于缓存，API 调用减少了 40%。

组件重新渲染最小化，提高响应能力。

由于代码更简单、更清晰，开发人员体验得到改善。

最后的想法

如果您正在构建现代 React 应用程序，Redux RTK Query 是一款必备工具。它的缓存、高效数据获取和自动状态管理使其成为创建高性能应用程序的强大盟友。

💡 想要了解更多？查看此存储库以获取实际示例。

让我知道你的想法或分享你使用 RTK Query 的经验！🚀

CLIS.CC