TypeError: nextCallback不是函数

Question

我有一个示例网站与redux(redux-saga,redux-next-wrapper)。我创建了redux的所有组件并对它们进行了配置。但我得到了一个错误，当在标题`TypeError ` getStaticProps调度:nextCallback不是一个函数。我将分享我的结构代码和感谢发现我的问题。

操作代码

import { NewsActionE } from "../../../enums/newsActionEnum"
import { FetchGetsRequest, FetchNewsSuccessPayload, FetchPostsFailure, FetchPostsFailurePayload, FetchPostsSuccess } from "../../../types/allNewsT"
export const requestNews = (): FetchGetsRequest => ({
type: NewsActionE.REQUESTNEWS
})
export const fetchNewsSuccess = (
payload: FetchNewsSuccessPayload
): FetchPostsSuccess => ({
type: NewsActionE.GETALLNEWS,
payload
});
export const ErrorNews = (
payload: FetchPostsFailurePayload
): FetchPostsFailure => ({
type: NewsActionE.Failure,
payload
});

还原剂

import { HYDRATE } from "next-redux-wrapper";
import { AnyAction } from "redux";
import { NewsActionE } from "../../../enums/newsActionEnum"
export interface initialState {
pending: false
errors: null
articles: []
}
export const reducer = (state: initialState | undefined, action: AnyAction): initialState | any => {
switch (action.type) {
case HYDRATE:
// Attention! This will overwrite client state! Real apps should use proper reconciliation.
return { ...state, ...action.payload };
case NewsActionE.REQUESTNEWS:
return {
...state,
pending: true,
}
case NewsActionE.Failure:
return {
...state,
pending: false,
articles: [],
errors: action.payload.console.error
}
case NewsActionE.GETALLNEWS:
return {
...state,
pending: false,
articles: action.payload,
errors: null
}
default:
return { ...state };
}
}

传奇

import axios, { AxiosResponse } from "axios"
import http from '../../../services/httpService';
import { call, put, all, takeLatest } from 'redux-saga/effects'
import { News } from '../../../models/news/News'
import { ErrorNews, fetchNewsSuccess } from "../..";
import { NewsActionE } from "../../../enums/newsActionEnum";
const getNews = (): Promise<AxiosResponse<News, any>> =>
http.get<News>('/data/getallposts')
function* fetchNewsSaga(): any {
try {
const response = yield call(getNews);
yield put(fetchNewsSuccess({
news: response.data
}));
} catch (e) {
yield put(ErrorNews({
error: 'e.message'
}));
}
}
function* newsSaga() {
yield all([takeLatest(NewsActionE.REQUESTNEWS, fetchNewsSaga)])
}
export default newsSaga;

根传奇

import { all, fork } from "@redux-saga/core/effects";
import newsSaga from "./news/newssaga";
export function* RootSaga() {
yield all([fork(newsSaga)])
}

存储

import { AnyAction, applyMiddleware, createStore, Store } from "redux";
import reducers from "../reducer/news";
import createSagaMiddleware from "@redux-saga/core";
import { Task } from 'redux-saga'
import { RootSaga } from "../sagas/rootSaga";
import { Context, createWrapper } from "next-redux-wrapper";
import { initialState } from "../reducer/news/newsReducer";
import { RootState } from "..";
export interface SagaStore extends Store<initialState | any, AnyAction> {
sagaTask?: Task;
}
export const makeStore = (context: Context) => {
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
reducers,
applyMiddleware(sagaMiddleware));
(store as SagaStore).sagaTask = sagaMiddleware.run(RootSaga);
return store;
};
export const wrapper = createWrapper<Store<RootState>>(makeStore, { debug: true });

index.ts

import { END } from '@redux-saga/core'
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import AllNews from '../components/news'
import { requestNews, wrapper } from '../state'
const Home: NextPage = () => {

return (
<Layout title="News site">
<p>News site Home page</p>
<AllNews />
</Layout>
)
}
export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
store.dispatch(requestNews());
// end the saga 
store.dispatch(END);
await store.sagaTask.toProm();
})

export default Home

Answer 1

您正在将您的reducer导出为命名导出，但将其导入为默认导入。因此，它很可能是undefined。

import { reducer } from "../reducer/news";

不是

import reducers from "../reducer/news";