Next.js页面刷新时useEffect未触发Redux Saga action更新store状态求助

核心问题1：函数命名冲突导致请求异常 #

你当前定义了两个完全同名的fetchFreeAds函数：

• 一个是Redux Action生成函数，返回的是action对象
• 一个是实际发起axios请求的API函数
  如果saga文件中错误导入了Action生成函数而非API函数，yield call(fetchFreeAds)执行后不会返回接口响应，只会返回普通对象，导致response取值为undefined，最终不会触发SET_FREE_ADS的状态更新。

修复方案：重命名其中一个函数避免冲突，比如把API请求函数改名为fetchFreeAdsApi，导入时明确引用正确的函数：

// saga文件修改示例
import { fetchFreeAdsApi } from '你的api文件路径'

export function* handleFreeAds() {
    const { response, error } = yield call(fetchFreeAdsApi);
    // 后续逻辑不变
}

核心问题2：Redux状态初始值缺失导致渲染报错 #

你组件中直接调用freeADS.map，如果ads reducer中freeAds的初始值没有设置为空数组，首次渲染（接口请求未返回时）freeADS为undefined，调用map方法会直接抛出Cannot read properties of undefined (reading 'map')错误。

修复方案：给reducer对应字段设置初始值，同时组件内增加可选链判断兼容：

// reducer示例
const initialState = {
  freeAds: [] // 明确设置为空数组
}
const adsReducer = (state = initialState, action) => {
  // 你的reducer逻辑
}

// 组件渲染逻辑修改
return(
  {freeADS?.map((data, i) => {
     // 原有逻辑
  })}
)

补充排查点：Saga监听逻辑校验 #

请确认你的rootSaga中已经正确配置了对应action的监听，示例如下：

import { takeLatest } from 'redux-saga/effects'
import { handleFreeAds } from '你的handler路径'
import { ActionTypes } from '你的常量路径'

export function* rootSaga() {
  yield takeLatest(ActionTypes.FETCH_FREE_ADS, handleFreeAds)
  // 其他监听逻辑
}

如果没有配置上述监听逻辑，dispatch的action不会被saga捕获，自然不会触发接口请求和状态更新。

额外优化点：useEffect依赖项补充 #

建议把dispatch加入useEffect的依赖数组，避免React Hooks规则告警：

useEffect(() => {
  dispatch(fetchFreeAds());
}, [dispatch])

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