使用reduxToolkit rtk时如何避免重新蚀刻

Question

嗨，我有以下代码。我是reduxToolkit rtk的新手，希望你能帮助我找到问题的解决方案。

我有以下代码。因此，使用这段代码，我将创建posts端点。

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const postsApi = createApi({
reducerPath: "postsApi",
baseQuery: fetchBaseQuery({
baseUrl: "https://jsonplaceholder.typicode.com/",
}),
endpoints: (builder) => ({
posts: builder.query({ query: () => "/posts" }),
}),
});
export const { usePostsQuery } = postsApi;

这是我的商店。

import { configureStore } from "@reduxjs/toolkit";
import { postsApi } from "./services/postsApi";
export const store = configureStore({
reducer: {
[postsApi.reducerPath]: postsApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(postsApi.middleware),
});

这就是我获取数据的地方。

const Home = () => {
const count = useSelector(
(state) => state?.postsApi?.queries?.["posts(undefined)"]?.data
);
const { data, error, isLoading, isFetching, isSuccess } = usePostsQuery();
return (
<>
{isSuccess && console.log("data", data)} 
</>
);
};
export default Home;

因此，当我获取数据时，它存储在存储中，所以每次安装<Home />组件后，我都会再次从后端获取数据，我希望避免这种获取，因为我的存储中已经有了这些数据。怎么能做到呢？

Answer 1

不应该发生这样的重新蚀刻-这是你的假设，还是你真的在网络选项卡中看到了？

Answer 2

默认情况下，如果触发与现有查询相同的查询，则不会执行任何请求。

如果需要，可以强制进行重新蚀刻。您可以调用钩子返回的refetch。

您可以在RTK查询文档上找到更多详细信息