Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Examples] Problem with query parameters in with-redux-persist #15484

Closed
mdolon opened this issue Jul 26, 2020 · 3 comments · Fixed by #16085
Closed

[Examples] Problem with query parameters in with-redux-persist #15484

mdolon opened this issue Jul 26, 2020 · 3 comments · Fixed by #16085
Labels
good first issue Easy to fix issues, good for newcomers

Comments

@mdolon
Copy link

mdolon commented Jul 26, 2020

Bug report

Describe the bug

In the with-redux-persist example, using a query parameter in the URL seems to break the loading functionality.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Clone the repo
  2. Change the loading component to a simple string, as such:
<PersistGate loading={<div>Loading</div>} persistor={persistor}>
  1. Run yarn dev and navigate to http://localhost:3000/?test=123
  2. Page is stuck on loading

Expected behavior

It should work the same way it does without the query parameter, meaning the page should load properly like it does http://localhost:3000/

System information

  • OS X
  • Chrome 84
@mdolon mdolon changed the title Problem with query parameters in with-redux-persist example [Examples] Problem with query parameters in with-redux-persist Jul 26, 2020
@timneutkens timneutkens added the good first issue Easy to fix issues, good for newcomers label Jul 26, 2020
@khattakdev
Copy link
Contributor

I'll try to fix this.

@weichienhung weichienhung mentioned this issue Aug 11, 2020
Merged
@weichienhung
Copy link
Contributor

@timneutkens
please help to review PR #16085

@kodiakhq kodiakhq bot closed this as completed in #16085 Sep 1, 2020
kodiakhq bot pushed a commit that referenced this issue Sep 1, 2020
@weichienhung
force persistor persist again after persistStore bootstrap done (#16085)
aa568a5 
This PR is to fix "[Examples] Problem with query parameters in with-redux-persist (#15484)"
The root cause is 
persist/rehydrate action will issue twice when query parameter is set. But persistStore initial bootstrap is not ready yet. So i add a bootstrap callback and force persistor to persist again to make overall state correct. I also modify the loading prop to a `<div>loading</div>` because it's confuse to set Component in loading prop. 

Attached the GIF
![demo](https://user-images.githubusercontent.com/1462027/89922530-bec04000-dc31-11ea-9831-12cd9d436d96.gif)

Closes #15484
ijjk pushed a commit to ijjk/next.js that referenced this issue Sep 2, 2020
@weichienhung @ijjk
force persistor persist again after persistStore bootstrap done (verc…
5c8355e 
…el#16085)

This PR is to fix "[Examples] Problem with query parameters in with-redux-persist (vercel#15484)"
The root cause is 
persist/rehydrate action will issue twice when query parameter is set. But persistStore initial bootstrap is not ready yet. So i add a bootstrap callback and force persistor to persist again to make overall state correct. I also modify the loading prop to a `<div>loading</div>` because it's confuse to set Component in loading prop. 

Attached the GIF
![demo](https://user-images.githubusercontent.com/1462027/89922530-bec04000-dc31-11ea-9831-12cd9d436d96.gif)

Closes vercel#15484
HitoriSensei pushed a commit to HitoriSensei/next.js that referenced this issue Sep 26, 2020
@weichienhung
force persistor persist again after persistStore bootstrap done (verc…
a250ded 
…el#16085)

This PR is to fix "[Examples] Problem with query parameters in with-redux-persist (vercel#15484)"
The root cause is 
persist/rehydrate action will issue twice when query parameter is set. But persistStore initial bootstrap is not ready yet. So i add a bootstrap callback and force persistor to persist again to make overall state correct. I also modify the loading prop to a `<div>loading</div>` because it's confuse to set Component in loading prop. 

Attached the GIF
![demo](https://user-images.githubusercontent.com/1462027/89922530-bec04000-dc31-11ea-9831-12cd9d436d96.gif)

Closes vercel#15484
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
good first issue Easy to fix issues, good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

force persistor persist again after persistStore bootstrap done weichienhung/next.js
5 participants
@mdolon @weichienhung @timneutkens @balazsorban44 @khattakdev