next-redux-wrapper icon indicating copy to clipboard operation
next-redux-wrapper copied to clipboard

SSR does not work with Redux Saga example

Open andre-matulionis-ifood opened this issue 3 years ago • 2 comments

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

  • Redux Saga: https://github.com/andre-matulionis-ifood/test-redux-wrapper/tree/saga
  • Redux Only: https://github.com/andre-matulionis-ifood/test-redux-wrapper/tree/redux

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

  • OS: Linux Ubuntu 20.04
  • Browser: Chrome 98.0.4758.80

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.

andre-matulionis-ifood avatar Feb 07 '22 15:02 andre-matulionis-ifood

Any updates here?

taraskhvyl avatar Jun 09 '22 21:06 taraskhvyl

Same issue here.

Altroo avatar Aug 08 '22 17:08 Altroo