Skip to content

Commit

Permalink
force persistor persist again after persistStore bootstrap done (verc…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
weichienhung authored and Piotr Bosak committed Sep 26, 2020
1 parent 251b0e7 commit a250ded
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions examples/with-redux-persist/pages/_app.js
Expand Up @@ -5,11 +5,13 @@ import { PersistGate } from 'redux-persist/integration/react'

export default function App({ Component, pageProps }) {
const store = useStore(pageProps.initialReduxState)
const persistor = persistStore(store)
const persistor = persistStore(store, {}, function () {
persistor.persist()
})

return (
<Provider store={store}>
<PersistGate loading={<Component {...pageProps} />} persistor={persistor}>
<PersistGate loading={<div>loading</div>} persistor={persistor}>
<Component {...pageProps} />
</PersistGate>
</Provider>
Expand Down

0 comments on commit a250ded

Please sign in to comment.