NextJs TypeError:nextCallback不是函数

Question

这是我第一次在next.js中使用redux，我无法在NextJs中设置redux，而且我总是收到这个错误。我尝试了另一种方法，但我仍然得到了更多的错误，我甚至无法配置它。

它充满了错误信息。

TypeError: nextCallback is not a function
at D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:146:46
at step (D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:57:23)
at Object.next (D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:38:53)
at D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:32:71
at new Promise (<anonymous>)
at __awaiter (D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:28:12)
at makeProps (D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:135:16)
at D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:186:46
at step (D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.js:57:23)
at Object.next (D:Next Jshotelnode_modulesnext-redux-wrapperlibindex.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)
)

如果不让我知道你面临的问题，我希望这能有所帮助。