TypeError: nextCallback is not a function

Viewed 152

I've got a sample website with redux(redux-saga,redux-next-wrapper). I created all components of redux and configured them. But I got an error when dispatching in getStaticProps with title `TypeError: nextCallback is not a function. I will share my structures code and thanks to finding my problem.

Action code

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
});

reducers

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 };
    }
}

sagas

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;

root saga

import { all, fork } from "@redux-saga/core/effects";
import newsSaga from "./news/newssaga";

export function* RootSaga() {
    yield all([fork(newsSaga)])
}

store

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
1 Answers

You are exporting your reducer as a named export, but import it as a default import. As a result, it will likely be undefined.

Do

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

instead of

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