在基于React-Redux的应用中使用Apisauce处理401错误

我之前在项目里刚好碰到过类似的问题，其实两种思路都能解决，关键看你的项目架构和需求偏好，我给你拆解下具体的实现方式和各自的优劣：

如果你的401处理逻辑是全局统一的（比如所有接口返回401都要重置用户数据+跳转登录页），那给ApiService注入Redux的dispatch是最省心的方式，不用在每个Saga里重复写拦截逻辑。

具体实现步骤很简单：

• 首先在store初始化文件里导出dispatch函数或者整个store实例：

// store.js
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

export const store = configureStore({ reducer: rootReducer });
export const { dispatch } = store;

• 然后在创建ApiService的时候，把dispatch传进去，在响应监视器里直接调用：

// apiService.js
import { create } from 'apisauce';
import { dispatch } from './store';

const apiService = create({
  baseURL: 'https://your-api-domain.com',
  // 其他配置项，比如超时时间、请求头
});

// 配置Apisauce的响应转换器（类似Axios的响应拦截器）
apiService.addResponseTransform(response => {
  if (response.status === 401) {
    // 直接派发重置用户状态的action
    dispatch({ type: 'auth/resetUserData' });
    // 浏览器环境下直接跳转登录页
    if (typeof window !== 'undefined') {
      window.location.href = '/login';
    }
  }
});

export default apiService;

⚠️ 注意：如果你的项目是服务端渲染（SSR），直接引用全局store会有状态污染风险，这时候建议用工厂函数创建ApiService，每次请求都传入当前请求对应的dispatch实例。

如果你不想让ApiService和Redux耦合太紧密，或者不同接口的401需要差异化处理，那在Saga层统一封装请求逻辑会更灵活，也符合Redux-Saga“副作用集中管理”的设计理念。

不用每个Saga都写一遍401判断，我们可以封装一个通用的工具函数：

// sagas/utils/apiHandler.js
import { call, put } from 'redux-saga/effects';

export function* handleApiRequest(apiCall) {
  try {
    const response = yield call(apiCall);
    
    // 全局拦截401
    if (response.status === 401) {
      yield put({ type: 'auth/resetUserData' });
      // 抛出自定义错误，让调用方可以做业务相关处理
      throw new Error('UNAUTHORIZED');
    }
    
    return response;
  } catch (error) {
    // 这里可以统一处理其他错误，比如网络异常
    throw error;
  }
}

然后在各个业务Saga里直接用这个工具函数代替原生的call：

// sagas/userSaga.js
import { put } from 'redux-saga/effects';
import { handleApiRequest } from './utils/apiHandler';
import apiService from '../apiService';

export function* fetchUserProfile() {
  try {
    const response = yield handleApiRequest(() => apiService.get('/user/profile'));
    // 处理正常响应
    yield put({ type: 'user/fetchProfileSuccess', payload: response.data });
  } catch (error) {
    if (error.message === 'UNAUTHORIZED') {
      // 这里可以做业务专属的401处理，比如弹出提示
      yield put({ type: 'ui/showToast', payload: '登录已过期，请重新登录' });
    } else {
      // 处理其他错误
      yield put({ type: 'user/fetchProfileFailed', payload: error.message });
    }
  }
}

如果你的项目规模较大，想要彻底解耦ApiService和Redux，那可以用Redux-Saga的Channel来传递401事件：

• 首先在ApiService里创建一个Channel，当捕获到401时发送事件：

// apiService.js
import { create } from 'apisauce';
import { channel } from 'redux-saga';

// 创建一个专门传递认证事件的Channel
export const authEventChannel = channel();

const apiService = create({
  baseURL: 'https://your-api-domain.com',
});

apiService.addResponseTransform(response => {
  if (response.status === 401) {
    // 向Channel发送401事件
    authEventChannel.put({ type: 'UNAUTHORIZED' });
  }
});

export default apiService;

• 然后写一个专门的Saga来监听这个Channel，处理401逻辑：

// sagas/authWatcherSaga.js
import { take, put } from 'redux-saga/effects';
import { authEventChannel } from '../apiService';

export function* watchUnauthorizedEvents() {
  // 持续监听Channel中的事件
  while (true) {
    yield take(authEventChannel);
    yield put({ type: 'auth/resetUserData' });
    window.location.href = '/login';
  }
}

• 最后把这个Watcher Saga加入到Root Saga中即可。

这种方案的优势是ApiService完全不依赖Redux，只负责抛出事件，所有的状态更新逻辑都留在Saga层，解耦做得非常彻底，适合大型团队协作项目。

没有所谓的“唯一正确”方案，选择哪个取决于你的需求：

• 小型项目/全局统一401逻辑：选方案1，简单高效
• 需要差异化处理401/不想耦合ApiService和Redux：选方案2
• 大型项目/追求极致解耦：选进阶的Channel方案

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