新手替换Redux-Thunk时遇Redux-Saga异步任务执行两次问题

嘿，作为刚上手Redux-Saga的开发者，碰到这种“异步任务莫名执行两次”的问题确实挺闹心的——我当初入门时也踩过类似的坑！咱们一步步拆解排查：

最可能的原因：call效应的写法错误 #

这是新手最容易犯的问题：你是不是在Worker Saga里把AJAX函数的调用结果传给了call，而不是传递函数本身的引用？

举个例子：

错误写法（会导致两次执行）

function* getChildDataAsync() {
  // 这里的 getChildData() 会立即执行一次，然后Saga运行到yield时又会再调用一次！
  const data = yield call(getChildData()); 
  yield put({ type: 'GET_CHILD_DATA_SUCCESS', payload: data });
}

正确写法（仅执行一次）

function* getChildDataAsync() {
  // 只传递函数引用，由Redux-Saga负责调用它
  const data = yield call(getChildData); 
  // 如果需要传参数，写法是：call(getChildData, param1, param2)
  yield put({ type: 'GET_CHILD_DATA_SUCCESS', payload: data });
}

为什么普通副作用（比如console.log）不会有问题？因为你测试时大概率用了正确的写法：yield call(console.log, '测试')，而不会写成yield call(console.log('测试'))——后者其实也会执行两次，只是你可能没注意到而已。

其他可能的排查方向 #

如果上面的写法没问题，再逐一检查下面的点：

1. 确认Action是否被dispatch了两次

在你的action creator里加个日志，看看是不是被触发了两次：

export const getChildData = () => {
  console.log('👉 触发GET_CHILD_DATA action');
  return { type: 'GET_CHILD_DATA' };
};

如果控制台打印了两次，说明有其他地方（比如请求回调、Reducer逻辑里）重复dispatch了这个action，需要定位源头。

2. 检查组件是否重复挂载

虽然你说componentDidMount只调用一次，但可以加日志确认：

componentDidMount() {
  console.log('👉 组件挂载，调用getChildData');
  this.props.getChildData();
}

如果打印了两次，可能是父组件的状态变化导致当前组件被卸载后重新挂载（比如key属性变化、条件渲染逻辑触发）。

3. 确认Saga是否被重复注册

确保你只在全局store配置里调用过一次runSaga，不要在组件内部（比如componentDidMount）注册Saga：

// store.js 正确示例
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));

// 只执行一次runSaga
sagaMiddleware.run(rootSaga);

如果在组件里重复注册Saga，会导致同一个action触发多个Worker执行。

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