Using redux in NEXT.JS

Solution 1:

this is your _app component:

function App({ Component, pageProps }) {
  return (
    <div>
      <Provider store={makeStore}>
        <Component {...pageProps} />
      </Provider>
    </div>
  );
}

you dont need to wrap it with Provider. this is the only thing you need to do in _app.

export default wrapper.withRedux(App)

this is getStatisProps in your pages/index.js

export const 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

export const 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