kirill-konshin / next-redux-wrapper

Redux wrapper for Next.js
MIT License
2.67k stars 265 forks source link

SSR does not work with Redux Saga example #455

Open andre-matulionis-ifood opened 2 years ago

andre-matulionis-ifood commented 2 years ago

Describe the bug

v7.0.5

Using the example in README.md as guide, I tried to set up my Next Redux Wrapper with a Redux Saga, but the SSR did not work. The same error does not happen when I used pure Redux. It also does not happen when I navigate from page to page client-side.

I followed the example, so:

  1. In _app, there's a getInitialProps wrapped in wrapper.getInitialAppProps, waiting for saga to be complete on server, calling App.getInitialProps and returning pageProps.
  2. In the page, it dispatches the redux action in getInitialProps
  3. createStore function has the setup for saga middleware
  4. I used a simple "merge state" for the HYDRATE action

Enabling debug in the next-redux wrapper, it sent these messages. I expected the status to be fulfilled, but it was loading yet

4. WrappedApp created new store with withRedux(WrappedApp)
  initialState:
    fetch: {status: 'fulfilled', data: {…}}

  initialStateFromGSPorGSSR:
    fetch: {status: "loading"}

Also, the HYDRATE action was dispatched twice. Once for initialState, another for initialStateFromGSPorGSSR

To Reproduce

A simple case in code sandbox https://codesandbox.io/s/repro-next-redux-with-saga-lryc5

I also created a repository with this case, implementing both the redux-saga solution and the redux-only solution

There are no steps necessary to do, the error occurs on load

Expected behavior

I expected the page getInitialProps to await saga to return initialState

Screenshots

First HYDRATE redux dev tools, hydrate action with fulfilled payload

Second HYDRATE redux dev tools, hydrate action with loading payload

Debug Client Browser console, showing debug messages. initialState fulfilled, but initialStateFromGSPorGSSR is loading

Debug Server Terminal, showing multiple debug messages

Desktop (please complete the following information):

I'm adding this, but I feel like this isn't applicable

Additional context

I am migrating a huge project from next-redux-wrapper v2 to v7. There's no possibility to remove redux-saga for now, and I tried solutions, like ignoring the HYDRATE action that removes the fulfilled state, but it would be a major refactor.

taraskhvyl commented 2 years ago

Any updates here?

Altroo commented 2 years ago

Same issue here.