question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

redux-persist: persist timed out for persist key "root" at eval

See original GitHub issue
screen shot 2018-04-04 at 4 41 45 am

^ In this screenshot, my config key is ‘tf’ because I’ve been trying to debug this error, lol. But yeah, I only see this error in the redux logs for the persist/REHYDRATE action. It doesn’t seem to be affecting the actual desired behavior of redux-persist, and I can’t figure out why it’s being thrown and how to get rid of it. I dug through the source and looks like @rt2zz fixed something in February that’s nearby but not exactly the same thing. This error seemed to pop up out of nowhere for us.

Here’s my setup. I wrote most of this originally pre-v5, then migrated to 5.0.0-proto and have been on that version since just now. This error happens for me both on 5.0.0-proto and after upgrading to 5.9.1.

Looking at the migration guide now makes me think some things aren’t quite right in my code, even if those things are not connected to this error. I’m using getStoredState & persistStore differently. Hopefully someone can give some insight 🙏 .

store.js

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { persistStore, persistReducer, getStoredState } from 'redux-persist';
import localforage from 'localforage';
import { toNumber } from 'lodash';

const middlewareList = [
 ....
];

if ( DEBUG ) {
  middlewareList.push(createLogger());
}

const config = {
  key: 'root',
  storage: localforage,
  debug: true,
  whitelist: ['activity', 'user']
};

const reducer = persistReducer(config, rootReducer);

const createStoreWithMiddleware = applyMiddleware(...middlewareList)(createStore);
const createRehydratedStore = (renderApp) => {
  getStoredState(config)
    .then((restoredState) => {
      const version = APP_VERSION; // eslint-disable-line no-undef
      const SCOPE_VERSION_LOCAL_STORAGE_KEY = 'scope-version';
      const savedVersion = window.localStorage.getItem(SCOPE_VERSION_LOCAL_STORAGE_KEY);
      const newVersion = toNumber(savedVersion) !== toNumber(version);

      const storeState = newVersion ? {} : restoredState;
      const store = createStoreWithMiddleware(reducer, storeState);
      const persistor = persistStore(store);

      if ( !savedVersion ) {
        window.localStorage.setItem(SCOPE_VERSION_LOCAL_STORAGE_KEY, version);
      } else if ( newVersion ) {
        persistor.purge();
        window.localStorage.setItem(SCOPE_VERSION_LOCAL_STORAGE_KEY, version);
      }
      renderApp(store, persistor);
    });
};

export default createRehydratedStore;

Note: we’re trying to do some manual cache invalidation up there by passing an empty obj to createStore if there’s a new app version. Maybe there’s a better way to do this. I wrote it back on 5.0.0-proto, and looking at it again I’m not sure why we needed to both a) pass an empty obj and b) call persistor.purge.

app.js, which calls createRehydratedStore and gets the app rendered

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { withRouter } from 'react-router';
import createStore from './store';
import { PersistGate } from 'redux-persist/integration/react';
import App from 'views/app';

const AppWithRouter = withRouter(App);

const renderApp = (store, persistor) => {
  render((
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <AppWithRouter />
        </BrowserRouter>
      </PersistGate>
    </Provider>
  ), document.getElementById('root'));
};

createStore(renderApp);

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:18
  • Comments:24

github_iconTop GitHub Comments

51reactions
ozalexocommented, Sep 16, 2018

setTimeout is started in persistReducer method, but I did not found clearTimeout… Here: https://github.com/rt2zz/redux-persist/commit/436050044d5ea6483d084c67820cd3fd9466eb38#diff-78c77d9b1c28b6777a1c3ec40164bb64R83

So, I just disabled timeout in my configs

const persistConfig = {
  key: 'keyOfStore',
  storage: storage,
  // There is an issue in the source code of redux-persist (default setTimeout does not cleaning)
  timeout: null,
}
const appReducer = combineReducers({
  ...otherReducers,
  keyOfStore: persistReducer(persistConfig, keyOfStoreRedfucer),
})
18reactions
JanithaRcommented, Apr 29, 2018

I ran into this issue a couple of hours ago. Now everything is perfectly fine. In the hopes of helping what happened in my case here it is.

I was working in the project and when ran outta battery in my mac so I just closed it and set aside yesterday. Today I just resumed working. And I remember the Android time mismatch warning was visible on my emulator. So lazy me just changed the clock setting and continued to work and that’s when the issue popped up and I found this issue. I just ignored for the time being and kept working and when tired just shutdown my mac.

Now again I started working everything fresh and the issue is no longer there. So I guess just restart app, emulator, bundler or PC and it’ll just go away.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Whenever I wrap my App with PersistGate it gives me "TypeError
map is not a function" and the error message from redux logger is "redux-persist: persist timed out for persist key "root". I really...
Read more >
persist timed out for persist key "root" at eval - Bountysource
redux -persist: persist timed out for persist key "root" at eval.
Read more >
The Definitive Guide to Redux Persist - React Native Coach
Redux Persist takes your Redux state object and saves it to persisted storage. ... If you are using React, wrap your root component...
Read more >
How to use the redux-persist.createTransform function ... - Snyk
To help you get started, we've selected a few redux-persist. ... const defaults = { // Key to be used for the time...
Read more >
i use redux-persist. But it error | by Minh Gòm | Medium
persist /REHYDRATE”, payload: undefined, err: Error: redux-persist: persist timed out for persist key “root” at ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found