如何在Axios响应拦截器中执行Redux Toolkit的dispatch操作？

在非组件代码（比如Axios拦截器）中无法使用useDispatch钩子，直接使用Redux store实例调用dispatch是官方支持的可行方案，具体步骤如下：

1. 确保Redux Store实例可导出 #

首先需要在创建Redux store的文件中，将store实例导出，方便拦截器导入使用。示例代码（store.js）：

import { configureStore } from '@reduxjs/toolkit';
// 导入你的slice reducer
import authReducer from './slices/authSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
    // 其他reducer...
  },
});

2. 在拦截器中导入Store并分发Action #

修改你的axiosWithIntercept.js文件，导入store实例和需要触发的action，在401错误逻辑中调用store.dispatch()：

import { myaxios } from './myaxios';
import { store } from './store'; // 导入store实例
import { logout } from './slices/authSlice'; // 导入你要触发的action

myaxios.interceptors.response.use(
  (resp) => resp,
  async (err) => {
    // 注意：原代码中err?.resp是错误的，应为err.response
    if (err.response?.status === 401) {
      // 直接分发Redux action
      store.dispatch(logout());
      // 可选：添加跳转登录页等后续逻辑
      window.location.href = '/login';
    }
    return Promise.reject(err);
  }
);

export default myaxios;

注意事项 #

• 组件内仍推荐使用useDispatch钩子，保持React Hooks的使用规范；仅在非组件环境下直接使用store.dispatch。
• 确保store实例的导入路径正确，避免出现模块导入错误。

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