RTK Query登出后调用resetApiState导致无法跳转首页问题

问题根源 #

你遇到的问题核心在于：apiSlice.util.resetApiState()会重置整个RTK Query API切片的所有状态，包括sendLogout mutation的isSuccess、isLoading等状态。当你在onQueryStarted回调中执行这个方法时，刚被设为true的isSuccess会立刻被重置回初始的false，导致Layout.jsx里监听isSuccess的useEffect要么没捕获到状态变化，要么捕获到后状态立刻反转，跳转逻辑无法正常执行。

解决方案 #

方案1：直接在登出操作中处理跳转与状态重置（推荐） #

不需要依赖isSuccess状态，而是在调用sendLogout时，通过unwrap()方法直接处理成功后的逻辑，避免状态冲突：

修改Layout.jsx中的登出按钮点击逻辑：

const navigate = useNavigate();
const [sendLogout] = useSendLogoutMutation();

const handleLogout = async () => {
  try {
    // 等待登出请求完成并获取结果
    await sendLogout().unwrap();
    // 先执行页面跳转
    navigate("/");
    // 再重置API状态
    dispatch(apiSlice.util.resetApiState());
  } catch (err) {
    console.error("登出失败：", err);
  }
};

同时可以移除原来监听isSuccess的useEffect，逻辑更直接清晰。

方案2：调整状态重置的时机（保留useEffect方式） #

如果一定要保留通过isSuccess触发跳转的逻辑，需要把resetApiState的调用移到跳转之后，同时移除authApiSlice.js中onQueryStarted里的状态重置代码：

1. 修改Layout.jsx的useEffect：

const navigate = useNavigate();
const [sendLogout, { isSuccess }] = useSendLogoutMutation();

useEffect(() => {
  if (isSuccess) {
    console.log("success");
    navigate("/");
    // 跳转完成后再重置API状态
    dispatch(apiSlice.util.resetApiState());
  }
}, [isSuccess, navigate, dispatch]);

2. 从authApiSlice.js的sendLogout mutation的onQueryStarted中删除dispatch(apiSlice.util.resetApiState());这一行。

补充说明 #

resetApiState是强重置操作，会清除所有RTK Query的缓存、请求状态和订阅，所以尽量避免在mutation的内部回调中直接调用，尤其是会影响当前mutation状态的场景。优先使用unwrap()处理mutation的成功/失败逻辑，代码更可控且不易出现状态冲突。

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