Basic configuration is causing two rehydrate actions, with ~5 second delay between

[Jeffdude]

Hello,

As the title states, after just setting up a very basic redux-persist configuration using local storage, I'm seeing a very strange bug where two 'persist/REHYDRATE' actions are seen. The first actually rehydrates the state, and then the second comes in after ~5 second delay before the second one. The second action has no payload but instead has and empty object with key 'err' like

type: "persist/REHYDRATE"
err: {}
key: "root"

And the problem arises because PersistGate component is waiting for the second rehydration before opening up the UI. Here's a screenshot of the timing I'm seeing quite consistently from the redux devtools inspector: https://imgur.com/a/tODodGP

Here's my store configuration. And here's my PersistGate component.

P.S. I'm also seeing two "persist/PERSIST" actions.

UPDATE 1: After looking at the 'trace' tab of redux devtools, I suspected my async middleware code, since the trace came from here, but then after disabling this middleware completely, the issue is still reproducing. UPDATE 2: After enabling debug, I am just seeing one message redux-persist/stateReconciler: rehydrated keys 'auth, _persist' . Confirmed that this delay is caused by a timeout internally in redux-persist, because modifying the timeout persistConfig option causes this delay to adjust correspondingly.

Thank you for your time, and please let me know if I can provide any more information.

[systemidx]

Were you able to make any headway with this? I'm having the same issue.

[Jeffdude]

Unfortunately, I'm still seeing this issue. I have just modified the timeout persistConfig to an unnoticeable delay.

[cdpark0530]

And the problem arises because PersistGate component is waiting for the second rehydration before opening up the UI.

Exactly. We need a fix about this.

Moreover, I found some definitions about this timeout in issues on this github and stackoverflow, but I can't find it in readme on this github nor in the type definition. I don't know exactly what timeout affects.

[nahtnam]

Hello! I was having the same problem, however I think I found an even better solution! Initially, I just set timeout to 1, but I found that if I spammed refresh, at some point, the data would be wiped. To fix this, what I did was set timeout to 0. This would cause my app to never load (stuck in the PersistGate loading state), and then I added this useEffect:

useEffect(() => {
    persistor.resync();
  }, []);

I found that this solution is much more stable, and I have not noticed the state ever being wiped from the storage.