使用redux-saga+next-redux-wrapper在getStaticProps dispatch时报nextCallback不是函数错误求助

问题定位 #

1. getStaticProps回调无返回值 #

next-redux-wrapper的getStaticProps方法要求传入的异步回调必须返回符合Next.js规范的返回值结构（包含props/redirect/notFound属性的对象），你当前代码的回调执行完逻辑后没有任何return语句，导致wrapper内部无法获取后续处理所需的参数，直接触发该类型错误。

2. saga等待方法拼写错误 #

你代码中写的await store.sagaTask.toProm()是拼写错误，redux-saga的task实例提供的等待完成方法为toPromise()，拼写错误会导致异步等待逻辑失效，连锁触发wrapper内部执行异常。

3. 代码笔误（潜在异常） #

• reducer中错误取值action.payload.console.error，和你定义的错误payload结构不匹配
• 初始状态只定义了接口未声明实际默认值，首次执行reducer时state可能为undefined
• saga返回的payload结构和reducer取值逻辑不匹配，会导致状态赋值错误

修复方案 #

第一步：修正index.ts的getStaticProps逻辑 #

export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
  store.dispatch(requestNews());
  store.dispatch(END);
  // 修正方法拼写错误
  await store.sagaTask.toPromise();
  // 必须返回符合规范的返回对象
  return {
    props: {}
  }
})

第二步：修正reducer逻辑 #

import { HYDRATE } from "next-redux-wrapper";
import { AnyAction } from "redux";
import { NewsActionE } from "../../../enums/newsActionEnum"

// 定义状态类型
export interface NewsState {
  pending: boolean;
  errors: null | string;
  articles: any[];
}
// 明确声明初始状态
const initialState: NewsState = {
  pending: false,
  errors: null,
  articles: []
}

export const reducer = (state: NewsState = initialState, action: AnyAction): NewsState => {
  switch (action.type) {
    case HYDRATE:
      // 建议根据你的reducer组合结构调整合并逻辑，避免覆盖其他模块状态
      return { ...state, ...action.payload };
    case NewsActionE.REQUESTNEWS:
      return {
        ...state,
        pending: true,
      }
    case NewsActionE.Failure:
      return {
        ...state,
        pending: false,
        articles: [],
        // 修正错误取值逻辑
        errors: action.payload.error
      }
    case NewsActionE.GETALLNEWS:
      return {
        ...state,
        pending: false,
        // 匹配saga返回的payload结构取值
        articles: action.payload.news,
        errors: null
      }
    default:
      return state;
  }
}

修改完成后重启项目即可解决报错，saga异步请求返回的数据会正确注入到redux状态中。

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