Client side state is not hydrated from server on page reload

Question

The client-side state is not hydrated from the server after creating a new store

CodeSandBox Link - https://codesandbox.io/s/vibrant-aryabhata-l29r2b

Steps to reproduce the behavior:

1. Run the app on the link above.
2. Login with any username/password
3. On login, the token is saved to the cookie, and the page redirects to the dashboard
4. In the console on the dashboard page, I am printing the current state, which appears okay as we are logged in.
5. Now refresh the dashboard page.
6. Server gets token via cookie and is authenticated
7. But when a new store is created on the client, it doesn't get the hydrated/updated state.
8. Same can be confirmed from auth state being printed in the console.log of this page.

Expected behavior

On page reload, upon hydration client should also get authenticated, and hence console would print logged in true.

Screenshots

You can clearly see in the screenshot above that as per hydration (__NEXT_REDUX_WRAPPER_HYDRATE__ ), the state is updated correctly but on console log on the client-side, I am getting loggedin as false.

• Next.js: [12]
• Next-redux-wrapper [7]

Additional context

I am stuck at it for a while and really don't know if there is anything wrong with my code or is a bug. Please look into it and suggest accordingly.

Answer 1

You have a minor misconfiguration. next-redux-wrapper already adds a Provider with the correct store. You need to remove the extra provider you're putting in _app.js. That was the reason why the component wasn't getting the correct data.

  render() {
    const { Component, pageProps, router } = this.props;
    return <Component {...pageProps} router={router} />;
  }