Getting error redux-persist: rehydrate for "root" called after timeout

[ajaymore]

redux-persist: rehydrate for "root" called after timeout., Object {
  "INITIALIZING": true,
  "_persist": Object {
    "rehydrated": true,
    "version": -1,
  },
  "user": null,
}, undefined
- node_modules/redux-persist/lib/persistReducer.js:92:59 in _rehydrate
- ... 13 more stack frames from framework internals

I am using expo sdk version 25
My code is as below

reducers.js

export default (
  state = {
    INITIALIZING: true,
    user: null
  },
  action
) => {
  switch (action.type) {
    default:
      return state;
  }
};

configureStore.js

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  let store = createStore(persistedReducer);
  let persistor = persistStore(store);
  return { store, persistor };
};

App.js

import React from 'react';
import { StyleSheet, Text, ActivityIndicator, View } from 'react-native';
import * as firebase from 'firebase';
import { PersistGate } from 'redux-persist/integration/react';
import { firebaseConfig } from './src/config';
import { Provider } from 'react-redux';
import configureStore from './src/configureStore';
import styled from 'styled-components';
// import Main from './src/screens/Main';
const { store, persistor } = configureStore();
firebase.initializeApp(firebaseConfig);

const StyledLoaderContainer = styled.View`
  justify-content: center;
  align-items: center;
  margin-top: 100px;
`;

const Loading = () => (
  <StyledLoaderContainer>
    <ActivityIndicator />
    <Text>Initializing...</Text>
  </StyledLoaderContainer>
);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={<Loading />} persistor={persistor}>
          <View>
            <Text>This is root</Text>
          </View>
        </PersistGate>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

[leonchabbey]

Same here.

Seems related to these recent commits: 4360500 and 98a78d9

[JanithaR]

The same happens to me after upgrading to v5.7.1

[Amurmurmur]

Same story here :/

[ghost]

I just downgraded version to 5.6.12 and still not working

[NicholasBertazzonAga]

@Avid21 Reverting back to 5.6.12 worked for me.

[JanithaR]

How to downgrade? Uninstall and re-install?

[krzysztof-miemiec]

Use semver ~5.6.0 instead of ^5.6.0. I forgot about it at first.

[ghost]

@NichAga Yes, it should work. I was using Remote JS debugging. I stopped it and hence naturally it's working now.

[NicholasBertazzonAga]

@JanithaR npm install redux-persist@5.6.12
@Avid21 good :D

[diegorodriguesvieira]

Same here! =(

[JanithaR]

Thanks @NichAga I figured it out. Just downgrade and keep working for the moment guys.

[rohanx96]

Yes, getting the same error. Reverting to 5.6.12 worked

[l3lackcurtains]

Worked after switching back to redux-persist@5.6.12

[outaTiME]

Same 😡

[jarvisluong]

Switch back to 5.6.12 works!

[outaTiME]

@jarvisluong yup im switch back to ~5.6.0

[rt2zz]

apologize for the churn here, v5.7.2 resolves the issue.

tests missed the issue on 5.7.1 as it was a console.error, not an actual exception

[RodolfoSilva]

@rt2zz I still have the same error after update to v5.7.2.

[sytolk]

I don't have this error with v.5.7.2. @RodolfoSilva are you sure that you upgrade version? You can check this in npm.lock or yarn.lock file.

[RodolfoSilva]

@sytolk, Yes, I'm use the latest version and still have the error. This error only happens when I use the debug in the first time.

"redux-persist": {
      "version": "5.7.2",
      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-5.7.2.tgz",
      "integrity": "sha512-NgkSoPA3o6vAo09U5hnzO8CgHNhnBIcZyZBr+tRa/pDDeQqtcsP/zru9b2vz5tIpK6GCYGEsEjSzWUU/vxfRQA=="
    },

[ajaymore]

I can confirm it's working with 5.7.2.

[patlux]

For me it was the short 'debounce' time which caused the error:

const persistOptions = {
  storage,
  debounce: 100, // <-- not working in 'Debug JS' mode
  key: DeviceInfo.getBundleId(),
  transforms: [compressor],
};

persistReducer(persistOptions, rootReducer)

I increased the time to 500 and now it's working fine.

react-native: v0.53.0
redux-persist: 5.9.1

---

Ok, that fixed not the error. I downgraded to v5.7.2 v5.6.12 and now it's working.

[challme28]

I have to say I've been stuck in this problem for a while now and it was my fault. I forgot to return an action on an Epic. I hope this helps anyone

[calanti]

I am stuck with this issue on my recently expo detached project. My state is never persisted regardless of remote debugging, and occasionally I get the error like the OP.

Expo: 24.0.0
react: 16.0.0
RN: Expo 24.0.0 fork
react-redux: 5.0.7
redux: 3.7.2
redux-persist: 5.9.1

On an up note, thank you very much for your work!

[droegier]

Same as @calanti

"expo": "25.0.0",
"native-base": "2.3.1",
"react": "16.2.0",
"react-native": "0.52.0",
"react-navigation": "^1.4.0",
"react-redux": "5.0.7",
"redux": "3.7.2",
"redux-persist": "5.9.1"

[kapobajza]

I was getting the same error on redux-persist version 5.9.1.

It was working fine until I put the whitelist prop into rootPersistConfig :

const rootPersistConfig = { key: 'root', ... , whitelist: ['auth'] };

But then I switched back to using the blacklist property and everything works fine now.

const rootPersistConfig = { key: 'root', ... , blacklist: ['navigation', 'isLoading', 'hasErrored'] };

[calanti]

Thanks for the insight and yes I am whitelisting, but blacklisting is not really a maintainable solution for me, too many recuders and I only need 2 whitelisted. Hopefully this can help the devs identify the issue though!

[baba43]

I have just created a new project with Expo and can not get this work either.

[ChristienGuy]

I get this issue with 5.9.1.
For me it only occurs when remote debugging.

Potentially related to this issue with setTimeout in React Native facebook/react-native#4470

[Gustash]

I was getting the same error. The issue was the emulators date and time weren't synchronised with my computer's. Make sure your date and time is the same between both

[wkoutre]

What @Gustash recommends + be sure your time zones are also aligned.

[jmkitavi]

I just needed to restart my emulator.
Thanks @Gustash

[dpchami]

@NichAga Yes, it should work. I was using Remote JS debugging. I stopped it and hence naturally it's working now.

This one solve my problem

[hryer]

try this

const persistConfig = { key: 'root', storage, timeout: null };

work for me

[enri90]

Same problem to react-native 0.60.0

[mbret]

persistor.persist() is still broken since 2018 on react native (did not try on web).
We have no way of resetting the state (after logout) and purge the store by using the official persistor API.

The only way we could have a cleanup and a persistence that still works afterward is by doing that hack
https://gist.github.com/mbret/511edf9627b743ad8a52559be61e3d45

Can we make this bug official (reopening the ticket) somehow and work on that ?

[prateekchachra]

Still happening with React Native version 0.60.0 and redux-persist 5.10.0.

I tried the suggestion with timeout being set to 0, not working at all.

[AgustinJimenez]

try this

const persistConfig = { key: 'root', storage, timeout: null };

work for me

+1

[abedolinger]

I got this error when the device I was testing on didn't have internet connectivity, and went away when it did. Could be related to the time mismatch issue @Gustash noted above.

[PedroBern]

Got this error on v6 during remote debugging because my computer time was 1 hour behind. After fixing the time, the error was gone!

[hao1234567]

Got this error on v6 while remote debugging because my computer time was 1 hour behind. After fix the time, the error was gone!

Thank you for reminding me!This worked for me!

[sintylapse]

For me issue appeared after upgrading RN to 0.60.0 and react-native-navigation to v4 and was resolved after I replaced previously recommended by wix android run script

"android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug",

with the standard script

"android": "react-native run-android",

[renielsalvador]

A workaround I've discovered for my own use: kill redux-persist's timeout functionality. If the timeout hits, your store is rehydrated with the initial state and then persisted again to kill the state that is likely still loading.

In your persist config, prevent the timeout setup (persistReducer.js#L88-99):

const persistConfig: {
   ...
   timeout: 0, // The code base checks for falsy, so 0 disables
};

A complete solution for redux-persist would be to add a timeout component to PersistGate that would render if your timeout is hit and stop the rehydration work. What it shouldn't do is then rehydrate your store with initialState, which is the current functionality.

What will be the implications of doing this?
I've been having similar issue and setting timeout: 0 fixed it. But I'm worried that there's a catch?

[ravindranpandu]

This issue was been there for a while, i tried a lot fixing it and finally @Gustash solution resolves it, thank you very much 👍

[rueiwoqp]

FYI, setting timeout to null instead of 0 will not fix this issue. Timeout must be a number. You can run the tests and verify if you want. Here's what the test output says when timeout is null:

> redux-persist@6.0.0 test
> flow && cross-env BABEL_ENV=commonjs ava

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ tests/complete.spec.js:42:74

Cannot call persistReducer with object literal bound to config because null [1] is incompatible with number [2] in
property timeout.

     tests/complete.spec.js
     39│
     40│ test('persistStore timeout 0 never bootstraps', t => {
     41│   return new Promise((resolve, reject) => {
 [1] 42│     let r1 = persistReducer({...config, storage: brokenStorage, timeout: null}, reducer)
     43│     const rootReducer = combineReducers({ r1 })
     44│     const store = createStore(rootReducer)
     45│     const persistor = persistStore(store, null, () => {

     src/types.js
 [2] 28│   timeout?: number,```

[SudoPlz]

Just to make this clear, is this a dev only issue (meaning that if we don't use any timeout values users won't have issues in production will they?)

[rueiwoqp]

Just to make this clear, is this a dev only issue (meaning that if we don't use any timeout values users won't have issues in production will they?)

This issue exists in all environments.

[andrewzey]

@SudoPlz Definitely an issue affecting production. I recommend thoroughly combing through the redux-persist code. Complete and total data erasure on production clients will be very frustrating, and it's a very good idea to understand the data storage layer fully.

If we weren't planning on moving away from react-native to native, we would honestly re-write our own lib to handle this because redux-persist has a few issues and it's not actively maintained anymore.

[iagormoraes]

@SudoPlz Definitely an issue affecting production. I recommend thoroughly combing through the redux-persist code. Complete and total data erasure on production clients will be very frustrating, and it's a very good idea to understand the data storage layer fully.

If we weren't planning on moving away from react-native to native, we would honestly re-write our own lib to handle this because redux-persist has a few issues and it's not actively maintained anymore.

as the package is not maintained anymore we could at least have some examples on how to migrate the data to another source, it will affect tons of projects.

[andrewzey]

@SudoPlz Definitely an issue affecting production. I recommend thoroughly combing through the redux-persist code. Complete and total data erasure on production clients will be very frustrating, and it's a very good idea to understand the data storage layer fully.
If we weren't planning on moving away from react-native to native, we would honestly re-write our own lib to handle this because redux-persist has a few issues and it's not actively maintained anymore.

as the package is not maintained anymore we could at least have some examples on how to migrate the data to another source, it will affect tons of projects.

As best I can tell that would require writing an alternative to redux-persist, understanding its persistence interaction with the file system / async storage, then writing a migration guide. That seems an unreasonable expectation of an author who abandoned the old project. Much more likely that a new project taking over the problem of redux-persistence would write a guide / utility for migrating TO their new project.

[tanveer-ahmad74]

@Avid21 Reverting back to 5.6.12 worked for me.

not working for me and 6.0.0 as well

[nickensoul]

Still actual

[FreddyCarrillo]

Lo que funcionó para mi fue pasar directamente en el reducer el persistedReducer

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
reducer: persistedReducer,

[002love]

Thanks, @hryer
Also in current versions of redax-perist, you will have to specify the time as a number in milliseconds, "20000" works fine on most devices