Redux state not updated on client side when fetching data in getServerSideProps

Describe the bug

Redux state is not updated when you dispatch an action in getServerSideProps.

The redux state in server side looks fine but when the server tries to render the UI, the state does not look right. The client does not have the updated state

To Reproduce

1. dispatch an action getServerSideProps

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store }) => {
    store.dispatch(getPosts())
  }
)

1. The action creator calls a rest end point for data.

export const getPosts = () => async (dispatch) => {
  const { data } = await Axios.get('https://jsonplaceholder.typicode.com/posts')
  dispatch({ type: actionTypes.POSTS, payload: data })
}

1. Th UI should update

const index = () => {
  const dispatch = useDispatch()
  const { counter, posts } = useSelector((state) => state.data)
  return (
    <div>
      <h1>
        Posts: <span>{posts.length}</span>
      </h1>
    </div>
  )
}

I’ve created this specific scenario and uploaded it to github https://github.com/JunayedMizan/next-js-with-redux

Expected behavior

I would expect the redux store in client side to update.

[kirill-konshin]

I told you to await the dispatch:

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store }) => {
    AWAIT store.dispatch(getPosts()) // <----------- HERE
  }
)

Otherwise Next.js does not know when action is finished.

[bsor-dev]

+1