一次dispatch却触发Redux saga执行两次 出现重复axios请求问题

常见导致两次请求的原因 #

• React18+ 严格模式（StrictMode）副作用：开发环境下严格模式会触发组件两次挂载，所有副作用（包括dispatch action）会执行两次，该问题仅存在于开发环境，生产环境自动消失。
• Saga监听器重复注册：saga中间件被重复启动，或者同个watcher在根saga中被注册多次，导致同一个TRIGGER action会触发两次worker执行。
• Action被重复dispatch：你观察到的useEffect只执行一次可能存在误判，实际可能因为组件重复渲染、依赖引用不稳定、其他地方同时监听params变化等原因，导致同一个TRIGGER action被发送了两次。
• 全局axios拦截器逻辑异常：请求拦截器中存在重复发送请求的逻辑。
• 多个watcher监听了同一个action类型：除了当前watcher外，还有其他saga监听器也绑定了setItemsCollection.TRIGGER的触发逻辑。

排查步骤 #

1. 确认Action触发次数：
   打开Redux DevTools查看action历史，或者在setItemsCollection.TRIGGER对应的reducer处理逻辑中加打印日志，确认该action是否真的仅触发一次。
2. 确认Saga注册次数：
   在setItemsCollectionWatcher函数开头加打印日志，若应用启动时该日志打印两次，说明saga被重复注册，同时检查是否有多个watcher监听了同一个setItemsCollection.TRIGGER action类型：

   export function* setItemsCollectionWatcher() {    
       console.log('watcher注册') // 新增日志
       yield takeEvery(setItemsCollection.TRIGGER, setItemsCollectionWorker);
   }
   

3. 关闭严格模式验证：
   移除项目根组件外层的<React.StrictMode>标签，重启应用后如果请求次数恢复为1次，即可确认是严格模式导致的开发环境正常表现。
4. 排查axios拦截器：
   注释掉所有全局axios请求/响应拦截器，验证请求次数是否恢复正常。

对应解决方法 #

• 严格模式导致：无需修改业务代码，生产环境打包后严格模式自动关闭，不会出现重复请求。开发阶段如果需要规避，可以暂时关闭严格模式。
• Saga重复注册：检查sagaMiddleware.run(saga)是否仅被调用一次，同时检查根saga的all数组中是否重复写入了setItemsCollectionWatcher，删除重复的注册逻辑即可。
• Action重复dispatch：检查useEffect依赖的params是否存在引用不稳定的问题，比如每次渲染都生成新的对象引用，可以将依赖改为[JSON.stringify(params)]或者用useMemo包裹params保证引用稳定；同时排查其他组件/钩子是否也监听了params变化并且dispatch了同一个action。
• 拦截器异常：修复拦截器逻辑，确保每个请求仅被发送一次。
• 多watcher监听同一action：删除重复的监听逻辑即可。

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