Using Redux In Next.js
In my application on Next.Js i use redux and redux saga. I want to use ssr making http requests: In the same time i want to get data of the above result: The issue is that, when
Solution 1:
this is your _app component:
functionApp({ Component, pageProps }) {
return (
<div><Providerstore={makeStore}><Component {...pageProps} /></Provider></div>
);
}
you dont need to wrap it with Provider
. this is the only thing you need to do in _app
.
exportdefault wrapper.withRedux(App)
this is getStatisProps
in your pages/index.js
exportconst getStaticProps = wrapper.getStaticProps(async ({ store }) => {
store.dispatch(getDataRequest());
store.dispatch(END);
await store.sagaTask.toPromise();
});
see store is already passed here. You will be accesing state via store.getState()
. this is how it should be
exportconst getStaticProps = wrapper.getStaticProps(async ({ store }) => {
store.dispatch(getDataRequest());
store.dispatch(END);
await store.sagaTask.toPromise();
const state = store.getState();
return {props:{data:state}} // since you have only one reducer
});
now data
will be passed as a prop to your component. if you console.log(props.data)
inside the component, you should be seeing your dataReducer
Post a Comment for "Using Redux In Next.js"