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

Answer 2

我已经多次查看代码，尽管我不是 Next.js 用户，但我注意到 app.js 渲染代码没有包含在包装商店的提供程序中，我希望看到类似这样的内容：

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

此外，我希望 .withRedux() 包含一个 createStore 对象（在您的情况下为 initStore）。像这样：

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

我希望这对您有所帮助，如果没有，请告诉我您面临的问题。