reactjs - NextJS: Redux store is returning empty when calling the store from another page either client-side or server-side

Question

I am calling a list of data in a page on the server-side, which is going to redux store. I want this data to be available to other pages.

Now, I have another page where I want to edit an article on the client-side. I am fetching a random article (for testing only) from the previously populated redux store with useSelector(). But the store is returning empty for this page! How come the populated store is not available in this page?

For testing, I tried with wrapper.getServerSideProps() to render the page on the server-side by accessing the store on the server but it's returning empty also!

The page where redux store is populating with blog list:

export default function BlogsList({blogs}){
    return(
        <div className="mainCon">
            <ul>
                {blogs.map((item) => (
                    <li key={item.author}>
                        <span>{item.author}</span><br/>
                        <span>{item.title}</span>
                        <h4>{item.body_delta}</h4>
                    </li>
                ))}
            </ul>
        </div>
    );
}


export const getServerSideProps = wrapper.getServerSideProps( async ({store, req}) =>{
    store.dispatch({type: FETCH_BLOG_LIST });
    store.dispatch(END);
    await store.sagaTask.toPromise();

    const myStore = store.getState();
    const blogs = myStore.blogReducer.blog;  
    return { props: {blogs}, };
});

The store output:

This is the client side only page where the store is returning empty:

export default function editBlog(){
    const myBlog = useSelector(state => state.blogReducer.blog);
    const body_delta = myBlog[1].body_delta;
    console.log(body_delta);    // Throws TypeError: Cannot read property 'body_delta' of undefined
                                // Since the store is empty here

    return (
        ...
    );
}

And this is it's empty store:

How do I access the store data from this page also?

Edit: I added getInitialProps in _app.js but still the store is empty!

class MyApp extends App {
  static getInitialProps = async ({Component, ctx}) => {

      return {
          pageProps: {
              ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
          },
      };

  };

  render() {
      const {Component, pageProps} = this.props;

      return (
          <Component {...pageProps} />
      );
  }
}

export default wrapper.withRedux(MyApp);

question from:https://stackoverflow.com/questions/65849232/nextjs-redux-store-is-returning-empty-when-calling-the-store-from-another-page

Answer 1

Waitting for answers