RTK查询刷新后isFetching持续为true无法更新的问题求助

核心问题定位 #

当请求仍在进行时刷新页面，RTK Query的isFetching会一直保持true，手动调用refetch或已有缓存数据也无法恢复；但清除sessionStorage、正常加载或切换标签页时均能正常运行。这大概率是Redux Persist持久化了RTK Query未完成的请求状态，导致页面恢复后状态异常。

针对性解决方案 #

1. 排除RTK Query缓存状态的持久化 #

Redux Persist默认会持久化整个store，包括RTK Query内部的请求状态（比如isFetching）。当请求未完成时刷新，持久化的isFetching: true状态会被恢复，但实际请求已经中断，RTK Query没有机制自动重置这个状态。

解决办法：在Redux Persist配置中，排除RTK Query的缓存slice，不让持久化请求状态。示例代码：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage/session';
import { apiSlice } from './path/to/apiSlice';
import { combineReducers, configureStore } from '@reduxjs/toolkit';

const persistConfig = {
  key: 'root',
  storage,
  blacklist: [apiSlice.reducerPath], // 排除RTK Query的reducer路径
};

const rootReducer = combineReducers({
  [apiSlice.reducerPath]: apiSlice.reducer,
  // 其他需要持久化的reducer
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // 避免Redux Persist的序列化警告
    }).concat(apiSlice.middleware),
});

2. 手动重置异常的请求状态 #

如果暂时无法修改Persist配置，可以在组件初始化时，检查isFetching状态是否异常，手动调用RTK Query的resetApiState方法重置整个API状态：

import { useDispatch, useEffect } from 'react-redux';
import { useYourQueryHook } from './path/to/apiSlice';
import { apiSlice } from './path/to/apiSlice';

function YourComponent() {
  const dispatch = useDispatch();
  const { data, isFetching } = useYourQueryHook();

  useEffect(() => {
    // 当isFetching为true但无数据时，判定为异常状态并重置
    if (isFetching && !data) {
      dispatch(apiSlice.util.resetApiState());
    }
  }, [isFetching, data, dispatch]);

  // 组件渲染逻辑
  return (
    // ...
  );
}

3. 调整RTK Query的缓存策略 #

通过配置refetchOnMountOrArgChange或cacheTime，确保页面刷新后缓存状态能正确失效：

const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    yourQuery: builder.query({
      query: () => '/your-endpoint',
      refetchOnMountOrArgChange: true, // 组件挂载或参数变化时自动重新请求
      cacheTime: 30000, // 缓存30秒，超时自动清除缓存
    }),
  }),
});

验证步骤 #

1. 按方案1修改Redux Persist配置，排除RTK Query的reducer
2. 模拟请求未完成时刷新页面，观察isFetching是否能自动重置为false
3. 测试清除sessionStorage、切换标签页等场景，确保原有功能不受影响

内容的提问来源于stack exchange，提问作者Drew Gallagher