Next.js项目Redux可获取后端数据但reducer接收payload为undefined如何解决

问题根源 #

1. 核心问题是getSomeStuff API封装函数缺少return语句，导致调用后返回值为undefined，Redux Saga拿到的异步执行结果自然为空，最终传入reducer的payload也就变成了undefined。
2. 附加潜在问题：reducer更新状态时没有展开原有state，当前只有list一个字段时影响不大，后续新增状态字段时会导致原有状态被覆盖丢失。

解决方案 #

1. 修复API封装函数的返回值 #

给getSomeStuff添加return语句，修改后代码如下：

getSomeStuff = (data: any) => {
  return http.get(`my/custom/endpoint`) as Promise<any>;
};

也可以简写为箭头函数隐式返回：

getSomeStuff = (data: any) => http.get(`my/custom/endpoint`) as Promise<any>;

2. （可选）优化reducer状态合并逻辑 #

更新状态时展开原有state，避免后续新增字段丢失：

function reducer(state = initialState, action: ReturnType<ActionType>) {
  switch (action.type) {
    case actionTypes.GET_SOME_STUFF_SUCCESS:
      return {
        ...state,
        list: action.payload,
      };
    default:
      return state;
  }
}

验证方法 #

修复完成后可在saga的yield call代码行后添加console.log(payload)，确认已经可以正常获取接口返回值，reducer中也能正常拿到payload更新list字段。

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