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

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'
  }
});

[ssorallen]

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.

[hryer]

try this

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

work for me