redux 如何使RTK查询缓存全局无效(重置状态)?

ifmq2ha2  于 2022-11-24  发布在  其他
关注(0)|答案(3)|浏览(155)

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

  • /车辆
  • /个用户
  • /设定

...等等
注销后rtk查询保留其状态,所以下次登录时数据是旧的。它们甚至可能不反映当前用户。我如何使所有缓存无效?

wtlkbnrh

wtlkbnrh1#

实际上它很简单,但是我不得不重构代码。
我为每个逻辑部分创建了新的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());
siotufzp

siotufzp2#

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

dispatch(api.util.resetApiState());

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

qf9go6mv

qf9go6mv3#

如果您只需要重置特定缓存,例如"CompanySettings",您也可以使用:

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

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

相关问题