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

^ 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);