NextJs TypeError: nextCallback is not a function

user_13188265 0
Viewed 3742

Its my first time use redux with next.js and I can't setup Redux with NextJs and I always get this error. I tried with another way but still I get more errors and i cant even config it.

and its full of error message.

TypeError: nextCallback is not a function
    at D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:146:46
    at step (D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:57:23)
    at Object.next (D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:38:53)
    at D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:32:71
    at new Promise (<anonymous>)
    at __awaiter (D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:28:12)
    at makeProps (D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:135:16)
    at D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:186:46
    at step (D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:57:23)
    at Object.next (D:\Next Js\hotel\node_modules\next-redux-wrapper\lib\index.js:38:53)

This is Setup File

import { createStore, applyMiddleware, combineReducers } from "redux";
import { HYDRATE, createWrapper } from "next-redux-wrapper";
import thunkMiddleware from "redux-thunk";
import roomsReducer from "./reducers/rooms";

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const combinedReducer = combineReducers({
  Room: roomsReducer,
});

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };
    if (state.count.count) nextState.count.count = state.count.count; // preserve count value on client side navigation
    return nextState;
  } else {
    return combinedReducer(state, action);
  }
};

const initStore = () => {
  return createStore(reducer, bindMiddleware([thunkMiddleware]));
};

export const wrapper = createWrapper(initStore);

This is _app.js File

import "../styles/globals.css";
import Layout from "./layout/layout";
import { wrapper } from "../Redux/store";

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />;
    </Layout>
  );
}

export default wrapper.withRedux(MyApp);

And finaly its my page that I want to dispatch an action

import Home from "../components/Home/Home";
import { getAllRooms } from "../Redux/actions/index";
import { wrapper } from "../Redux/store";

export default function Index() {
  return <Home />;
}

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store }) => {
    await store.dispatch(getAllRooms());
  }
);
react-redux redux next.js reactjs javascript
2 Answers

I found the following solution and followed the same tutorial.

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({ req, res }) => {
      await store.dispatch(getRooms(req));
    });

Reference: https://github.com/kirill-konshin/next-redux-wrapper

user_92772400

I have looked through the code several times and even though I am not a Next.js user I noticed that the app.js render code is not enclosed with a provider that wraps the store, I would expect to see something like this:

<Provider store={store}>
      <Layout>
           <Component {...pageProps} />
      </Layout>
</Provider>

Furthermore I would expect .withRedux() to contain a createStore object(in your case the initStore). Like this:

export default withRedux(createStore)(
  withRouter(MyApp)
)

I hope this is of any help, if not let me know what issues you are facing.

user_59728740
Related