为何redux-persist会导致RTK queries的isFetching状态持续为true？

这不是RTK Query或redux-persist的预期行为，是配置错误导致的状态持久化冲突。

原因分析 #

RTK Query的内部状态（包括isFetching这类临时请求状态）被redux-persist错误地持久化了。当页面刷新时，之前存储的isFetching: true状态会被重新加载到Redux Store中，而RTK Query无法自动重置这个临时状态，导致钩子始终认为请求处于进行中。

解决方法 #

配置redux-persist时，必须排除RTK Query生成的状态切片（默认切片名为api，由createApi的reducerPath指定）：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { api } from './path-to-your-api'; // 你的RTK Query实例
import { combineReducers } from '@reduxjs/toolkit';

const persistConfig = {
  key: 'root',
  storage,
  blacklist: [api.reducerPath], // 排除RTK Query的状态
};

const rootReducer = combineReducers({
  [api.reducerPath]: api.reducer,
  // 你的其他reducer
});

const persistedReducer = persistReducer(persistConfig, rootReducer);

如果需要持久化RTK Query的缓存数据，不要用redux-persist直接持久化整个query状态，应该使用RTK Query内置的缓存控制选项（比如keepUnusedDataFor）来管理缓存生命周期，这类设计才符合RTK Query的状态管理逻辑。

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