项目使用redux工具包和rtk查询。数据从一个api中获取,但是代码被分成更小的块来反映逻辑部分,如
...等等注销后rtk查询保留其状态,所以下次登录时数据是旧的。它们甚至可能不反映当前用户。我如何使所有缓存无效?
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());
siotufzp2#
解决方案:这将立即删除所有现有的缓存条目,并且所有查询都将被视为“未初始化”。因此,只需将下面的代码放入onClick或根据您的情况,这样当您点击输入请求时,缓存也将被清除。下面的api是您将在存储中的rtk查询中设置的api的名称。
dispatch(api.util.resetApiState());
有关更多信息,请查看文档https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils
qf9go6mv3#
如果您只需要重置特定缓存,例如"CompanySettings",您也可以使用:
dispatch(api.util.invalidateTags(['CompanySettings'])
Documentation https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils#invalidatetags
3条答案
按热度按时间wtlkbnrh1#
实际上它很简单,但是我不得不重构代码。
我为每个逻辑部分创建了新的api,所以要使缓存无效,我必须分别重置每个api的状态。
幸运的是rtk有代码拆分功能。
https://redux-toolkit.js.org/rtk-query/usage/code-splitting
基本上,您可以像这样创建baseApi:
然后,您可以在单独的文件中向其添加api片,如下所示。
这使您能够通过一次调度来重置整个api状态。
siotufzp2#
解决方案:这将立即删除所有现有的缓存条目,并且所有查询都将被视为“未初始化”。因此,只需将下面的代码放入onClick或根据您的情况,这样当您点击输入请求时,缓存也将被清除。下面的api是您将在存储中的rtk查询中设置的api的名称。
有关更多信息,请查看文档https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils
qf9go6mv3#
如果您只需要重置特定缓存,例如"CompanySettings",您也可以使用:
Documentation https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils#invalidatetags