Using redux in NEXT.JS

Question

In my application on Next.Js i use redux and redux saga. I want to use ssr making http requests:

export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
  store.dispatch(getDataRequest());
  store.dispatch(END);
  await store.sagaTask.toPromise();
});

In the same time i want to get data of the above result:

const selector = useSelector((s) => s);
  console.log(selector);

The issue is that, when i run the application i get an error:

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

I used the provider but the data doesn't appear.
Question: How to solve the issue in my application?
demo: https://codesandbox.io/s/awesome-butterfly-f7vgd?file=/pages/store/saga.js

Hello Asking, I dont't have the same error; I got store.getState is not a functiom. If I call makeStore in _app.js the error goes away, but I don't seem to have the data in the store. Can you check with this ? — P.E. Joëssel
– P.E. Joëssel, Commented Oct 27, 2020 at 18:15

Yilmaz · Accepted Answer · 2021-03-03 20:42:03Z

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

Collectives™ on Stack Overflow

Using redux in NEXT.JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related