Redux Saga请求中断处理咨询：pending状态滞留问题

1. 解决页面刷新后pending状态残留 #

页面刷新后redux状态卡在pending，大概率是因为你用了redux持久化工具（如redux-persist）保存了之前的状态。可以通过两种方式处理：

• 持久化配置排除pending状态：在redux-persist的配置中，将pending相关的状态字段从持久化列表中移除，确保页面刷新后不会恢复旧的pending状态。
• 初始化时重置pending状态：在应用启动的根saga或slice的初始化逻辑中，dispatch一个重置pending状态的动作。比如在slice的extraReducers中监听persist的REHYDRATE动作，将pending状态置为false：

// 示例slice代码
import { createSlice } from '@reduxjs/toolkit';

const dataSlice = createSlice({
  name: 'data',
  initialState: {
    pending: false,
    data: null,
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase('persist/REHYDRATE', (state, action) => {
      // 重置pending状态
      state.pending = false;
    });
  }
});

2. 页面关闭/组件卸载时清理pending状态 #

可以在saga中通过race监听页面跳转或卸载事件，取消请求并更新状态：

import { race, take, call, put, cancel, fork } from 'redux-saga/effects';
// 若使用react-router，导入路由变化action
import { LOCATION_CHANGE } from 'react-router-redux';

function* handleGetData(action: any): Generator<any, any, any> {
  yield put({ type: 'ACTION.GETDATA_PENDING', payload: action.payload });
  
  // 用fork启动请求任务，方便后续取消
  const requestTask = yield fork(function* () {
    try {
      const response = yield call(apiRequest);
      yield put({ 
        type: 'ACTION.GETDATA_FULFILLED', 
        payload: { name: action.payload, data: response.data } 
      });
    } catch (error: any) {
      yield put({ 
        type: 'ACTION.GETDATA_FAILED', 
        payload: { name: action.payload, data: error.message } 
      });
    }
  });

  // 同时监听路由变化和页面卸载事件
  const cancelTrigger = yield race({
    routeChange: take(LOCATION_CHANGE),
    pageUnload: call(() => new Promise(resolve => {
      window.addEventListener('beforeunload', resolve, { once: true });
    }))
  });

  // 触发取消时，终止请求并更新状态
  if (cancelTrigger.routeChange || cancelTrigger.pageUnload) {
    yield cancel(requestTask);
    yield put({ 
      type: 'ACTION.GETDATA_FAILED', 
      payload: { name: action.payload, data: '请求已取消' } 
    });
  }
}

注意：beforeunload触发时页面即将卸载，saga的dispatch可能无法同步完成，因此结合初始化重置pending状态的方案更可靠。

3. 超时重试机制 #

通过race将请求与延迟任务结合，实现超时判断，再加入重试逻辑：

import { race, delay, call, put } from 'redux-saga/effects';

const MAX_RETRIES = 2; // 最大重试次数
const REQUEST_TIMEOUT = 5000; // 5秒超时

function* handleGetData(action: any, retryCount = 0): Generator<any, any, any> {
  yield put({ type: 'ACTION.GETDATA_PENDING', payload: action.payload });
  
  try {
    const { response, timeout } = yield race({
      response: call(apiRequest),
      timeout: delay(REQUEST_TIMEOUT)
    });

    if (timeout) throw new Error('请求超时');

    yield put({ 
      type: 'ACTION.GETDATA_FULFILLED', 
      payload: { name: action.payload, data: response.data } 
    });
  } catch (error: any) {
    if (retryCount < MAX_RETRIES) {
      // 递归调用实现重试
      yield call(handleGetData, action, retryCount + 1);
    } else {
      yield put({ 
        type: 'ACTION.GETDATA_FAILED', 
        payload: { name: action.payload, data: error.message } 
      });
    }
  }
}

综合建议 #

将以上三种方案结合使用：通过持久化排除或初始化重置解决刷新后的pending残留；用saga的race和cancel处理页面跳转/卸载时的状态清理；加入超时重试提升用户体验，就能彻底解决你遇到的问题。

内容的提问来源于stack exchange，提问作者C. Helling