将 getStaticProps 与 next-redux-wrapper 一起使用 [英] Using getStaticProps with next-redux-wrapper
问题描述
我正在开发一个简单的 next.js 应用程序.对于状态管理,我使用的是 next-redux-wrapper.在我的主页中,我想使用 store.dispatch
从我的 api 获取数据库中的所有房间.
I'm developing a simple next.js app. For state management I'm using next-redux-wrapper. In my home page I want to fetch all the rooms in my database from my api using store.dispatch
.
当我使用 getServerSideProps
并调度它起作用的操作时,它会获取我所有的房间.但问题是当我想用 getStaticProps
获取房间时它不起作用,什么也没发生.
When I use getServerSideProps
and dispatch an action it works, it fetches all my rooms. But the problem is when I want to fetch rooms with getStaticProps
it doesn't work nothing's happening.
我应该在开发大型应用程序时使用 next-redux-wrapper 还是应该尝试其他库.因为我想在我的应用程序中使用 getStaticPaths
、getStaticProps
和 getServerSideProps
.在这些函数中,我通常会调度一个 redux 操作.
Should I use next-redux-wrapper when I develop big apps or should I try other libraries. Because I want to use getStaticPaths
, getStaticProps
and getServerSideProps
in my app. And in theese functions I'm usually gonna dispatch an redux action.
Store.js 文件
Store.js File
import { createStore, applyMiddleware } from "redux";
import { HYDRATE, createWrapper } from "next-redux-wrapper";
import thunkMiddleware from "redux-thunk";
import reducers from "./reducers/reducers";
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== "production") {
const { composeWithDevTools } = require("redux-devtools-extension");
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
const reducer = (state, action) => {
if (action.type === HYDRATE) {
const nextState = {
...state,
...action.payload,
};
return nextState;
} else {
return reducers(state, action);
}
};
const initStore = () => {
return createStore(reducer, bindMiddleware([thunkMiddleware]));
};
export const wrapper = createWrapper(initStore);
_app.js 文件
import "../styles/globals.css";
import { wrapper } from "../redux/store";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default wrapper.withRedux(MyApp);
pages/index.js 文件
pages/index.js file
import Layout from "../components/layout/Layout";
import Home from "../components/Home";
import { getRooms } from "../redux/actions/roomActions";
import { wrapper } from "../redux/store";
function HomePage() {
return (
<Layout>
<Home />
</Layout>
);
}
//THIS WORKS
/*export const getServerSideProps = wrapper.getServerSideProps(
(store) =>
async ({ req }) => {
await store.dispatch(getRooms(req));
}
);*/
// THIS WORKS
// THIS DOES NOT WORK
export const getStaticProps = wrapper.getStaticProps(({ store }) => {
async () => {
await store.dispatch(getRooms("http://localhost:3000/"));
};
});
// THIS DOES NOT WORK
export default HomePage;
推荐答案
使用7.0.x版本.npm install next-redux-wrapper
,默认安装6.0.x
Use the 7.0.x version.
npm install next-redux-wrapper
, installs the 6.0.x by default
而且只有 7 及以上版本的 next-redux-wrapper 支持此功能
And this is supported only in 7 and above version of next-redux-wrapper
这篇关于将 getStaticProps 与 next-redux-wrapper 一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!