why redux store becomes empty in next js when I navigate from one page to another page?

Question

In my first page I called API through getServerSideProps function, then i got 2 id's as a response, for example id-A and ID-B, Now in my second page I want to call another API through getServerSideProps function, where I have to pass id-A and ID-B as a parameters to API. how to get it?

What I have done is I stored api response in redux state, and I am trying to access redux state in second page to call api but it becomes null

Answer 1

You should have your redux provider at the app/top level (_app.js) instead of the pages level. Something like this in your _app.js

export default function MyApp({ Component }) {

  return (
    <Provider store={yourStore}>
      <Component />
    </Provider>
  )
}

If you instead have your Provider set up per page, then it means the store is recreated for every new page you visit.