NextJs TypeError：nextCallback 不是函数

Question

这是我第一次将 redux 与 next.js 一起使用，我无法使用 NextJs 设置 Redux，并且总是收到此错误。我尝试了另一种方法，但仍然遇到更多错误，我什至无法配置它。

并且充满了错误消息。

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)

这是安装文件

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

这是 _app.js 文件

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

最后，我想在我的页面上发送一个操作

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

Answer 1

我找到了以下解决方案并遵循相同的教程。

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

参考： https: //github.com/kirill-konshin/next-redux-wrapper