如何全局使RTK查询缓存失效（重置状态）？

Question

项目使用redux工具包和rtk查询。数据是从一个 api 获取的，但代码被分成更小的块以反映逻辑部分，例如

• /汽车
• /用户
• /设置

...ETC

注销后，rtk 查询会保留其状态，因此下次登录时数据是旧的。它们甚至可能不反映当前用户。如何使所有缓存失效？

Answer 1

其实很简单，但是我不得不重构代码。

我为每个逻辑部分创建了新的 api。因此，要使缓存无效，我必须单独重置每个 api 的状态。

幸运的是，rtk它具有代码分割功能： https ://redux-toolkit.js.org/rtk-query/usage/code-splitting

基本上你的创建baseApi是这样的：

export const baseApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: `${BASE_URL}/api`,
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth.token;
      if (token) {
        headers.set("authorization", `Bearer ${token}`);
      }
      return headers;
   },
  }),
  tagTypes: ["Vehicle", "CompanySetting", "Associate"],
  endpoints: () => ({}),
});

然后你可以在单独的文件中添加 api 切片，如下所示：

export const companySettingsApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getCompanySettings: builder.query<CompanySetting[], void>({
      query: () => ({
        url: `/companySettings`,
      }),
      providesTags: (_) => ["CompanySetting"],
    }),
    setCompanySettings: builder.mutation<void, CompanySetting[]>({
      query: (companySettings) => ({
        url: `/companySettings`,
        method: "PUT",
        body: companySettings,
      }),
      invalidatesTags: (_) => ["CompanySetting"],
    }),
  }),
});

这使您能够通过一次调度重置整个 api 状态

dispatch(baseApi.util.resetApiState());

Answer 2

解决方案：这将立即删除所有现有的缓存条目，并且所有查询将被视为“未初始化”。因此，只需将以下代码放入onClick或根据您的场景，这样当您点击输入请求时，缓存就会被清除。下面的api是您将在存储中的 rtk 查询中设置的 api 名称。

dispatch(api.util.resetApiState());

有关更多信息，请查看文档https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils

Answer 3

例如，如果您只需要重置特定缓存，CompanySettings您还可以使用：

dispatch(api.util.invalidateTags(['CompanySettings'])

文档https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils#invalidatetags