Skip to content Skip to sidebar Skip to footer

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"