Next.js: Store state differs between first and successive ssr in with-redux-saga example

Created on 15 Feb 2019  路  16Comments  路  Source: vercel/next.js

Example name

with-redux-saga

Describe the bug

Store state differs between first and second (actually all successive) server-side renders.

To Reproduce

  1. npx create-next-app --example with-redux-saga with-redux-saga-app
  2. cd with-redux-saga
  3. npm install
  4. npm run dev
  5. Open web browser and check the store value for placeholderData (has data)
  6. Reload the web browser and check the store value for placeholderData (is null)

Only solution is to restart the server.

Expected behaviour

I expected placeholderData to have the same value after every browser reload.

good first issue

Most helpful comment

@bbortt Works like a charm! Thank you very much!

All 16 comments

Reverting #6300 solves this issue. In effect reverting back to.

"next-redux-saga": "3.0.0",
"redux": "4.0.0",
"redux-saga": "0.16.0"

@janjarfalk i'll have a look at it.

Well, obviously saga task is canceled on server side as seen here on lines index.js:19-22. Therefore, takeLatest(actionTypes.LOAD_DATA, loadDataSaga) is not caught and no data is loaded on second (and continuous) server side render. However the task was already canceled before this update, see index.js:24-26.
So, @bmealhouse I wonder how the task survived on server side within version "next-redux-saga": "3.0."?

The error must be located in the example. See this issue in next-redux-saga for more information.

You might be right, but I didn't find this issue in the with-redux-saga example. I just used it to reproduce it. I see it in several, unfortunately private, projects. The setup in those projects is however derived from with-redux-saga in one way or another.

I am having problems geting my-little-streaming-dream (the auth-server) up and running. Do you have something smaller where it works?

If I simplify the requestUserInfo function in my-little-streaming-dream to...

function* requestUserInfo(action: RequestUserInfoAction) {
  yield put(setUserInfo({name:'Timon'}));
}

... it does reproduce the issue.

https://github.com/janjarfalk/my-little-streaming-dream/commit/de45e0ee33ea1fe0a0256247c32545b73cc2caed

Huh, heavy mistake on my side.. didn't run yarn install on my laptop and was still using "redux-saga": "0.16.2"..
You're right @janjarfalk, problem still exists.

No worries @bbortt! I appreciate the time and effort you are putting into this! I wish I could be of more help. My current knowledge of next-redux-saga, next-redux-wrapper and the changes in [email protected] is too little.

@janjarfalk I got the error and I even know how to fix it. Will update the example and the documentation on next-redux-saga shortly :)

Can you test the example again @janjarfalk?
Edit: You can close the issue if it does so 馃憤

@bbortt Works like a charm! Thank you very much!

@bbortt - After looking through the PR it was a very straightforward solution. Excellent work!

Just a short thing before you go...

As I said before my knowledge of next-redux-saga, next-redux-wrapper and the changes in [email protected] is little. So.. not knowing you would fix this so quickly (thanks again!) I decided to copy-paste-rewrite next-redux-saga, next-redux-wrapper from scratch.

I think it would make sense to drop next-redux-wrapper as a dependency. It doesn't do much and the code was easier for me to reason about when it was merge with next-redux-saga.

https://gist.github.com/janjarfalk/e0ed2566143d9ed02cae7c9a1c7bdcbb

@janjarfalk - I definitely agree with this approach. However I don't plan to make those changes myself, since I'm not using redux or saga in any of my current projects. If anyone would like to submit a PR for this I would be happy to get this in.

@janjarfalk can you submit a pr containing those changes?
I would collaborate on creating tests and I also see one or two things in your gist which I want to check first.

@bbortt There are a lot of breaking changes in the gist - no config, no debug etc. I think we can and should drop next-redux-wrapper without breaking changes. Let me find some time and I'll do a proper merge and PR.

Was this page helpful?
0 / 5 - 0 ratings