Redux Saga在while循环内调用API出现组件卸载更新状态报错如何解决

问题原因 #

1. 警告报错：触发fetchRaces的组件在Saga的while循环请求全部完成前就已卸载，但Saga任务仍在后台运行，全部请求完成后执行put(fetchRacesSuccess)更新state时，就会触发「无法对已卸载的组件执行状态更新」的警告。
2. 卡顿问题：全量数据拉取完成后才一次性更新state，如果数据量较大，会导致React单次渲染任务过重出现阻塞；同时未做请求去重/取消逻辑，重复触发请求也会加剧性能消耗。

修复步骤 #

1. 修改Saga代码添加取消逻辑 #

新增取消信号监听，收到取消指令后直接终止循环，不再执行后续的state更新操作：

import { call, put, select, cancelled, race, take } from 'redux-saga/effects';

function* doFetchRaces(site, date, offset = 0) {
  const endpoint = options.endpoints.getRaces(site, date, offset);
  const response = yield call(request, site, endpoint.url);
  return response;
}

export function* sagafetchRaces(action) {
  const site = yield select(makeSelectSite());
  yield put(changeDate(action.date));

  try {
    let done = false;
    let offset = 0;
    const entities = [];
    while (!done) {
      // 每轮请求同时监听取消信号
      const { res, cancel } = yield race({
        res: call(doFetchRaces, site, action.date, offset),
        cancel: take('CANCEL_FETCH_RACES') // 自定义取消动作的type
      });
      // 收到取消信号直接终止循环
      if (cancel) return;
      
      entities.push(...res.results);
      offset += res.results.length;
      done = res.next === null;
    }
    yield put(fetchRacesSuccess(entities));
  } catch (error) {
    console.error(error);
  } finally {
    // 处理外部取消场景（比如takeLatest自动取消旧任务）
    if (yield cancelled()) {
      // 这里可添加取消未完成网络请求的逻辑，比如调用axios cancelToken、AbortController.abort()
    }
  }
}

2. 调整Saga监听逻辑为takeLatest #

在根Saga里将原有的takeEvery监听改为takeLatest，触发新的拉取请求时自动取消上一个未完成的旧任务，避免多余请求和无效更新：

import { takeLatest } from 'redux-saga/effects';
import { sagafetchRaces } from './Saga';

// 假设你触发拉取赛事的action type为FETCH_RACES
function* rootSaga() {
  yield takeLatest('FETCH_RACES', sagafetchRaces);
  // 其他Saga监听逻辑保留
}

3. 补全useEffect清理逻辑 #

组件卸载时主动派发取消动作，终止后台运行的Saga任务：

import { useDispatch } from 'react-redux';

// 组件内代码
const dispatch = useDispatch();

useEffect(() => {
  if (selectedDate != null) {
    return;
  }
  if (values.meet !== '') {
    fetchMeet(values.meet);
  } else {
    fetchRaces(new Date().toISOString().slice(0, 10));
  }
  // 组件卸载时派发取消动作
  return () => {
    dispatch({ type: 'CANCEL_FETCH_RACES' });
  };
// 补全useEffect依赖，避免不必要的重复触发
}, [selectedDate, values.meet, dispatch]);

额外优化建议 #

• 如果拉取的实体数据量很大，可使用normalizr对数据做扁平化处理后再存入state，大幅提升state读写效率。
• 若全量更新state仍有卡顿，可调整逻辑为每拉取一批数据就put一次到state，让组件分批渲染降低单次渲染压力。
• 添加加载状态，拉取数据时禁用选择器操作，避免用户重复触发请求。

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