(persistStore): add timeout config

[rimzici]

Following is the sample of my usage.

export function configureStore(onComplete: () => void) {
	const store = createStore(
		reducers,
		undefined,
		applyMiddleware(thunk, logger),
	);

	let persistor = persistStore(store, null, onComplete);

	return { store, persistor };
}

'onComplete' is the callback that I am passing to the persistStore.

Everything works fine until I turn the Remote Debugger On.
After turning the debugger On, when I reload the JS bundle, the callback 'onComplete' is not getting called. As I am controlling the APP's flow inside the callback my app looks frozen.

And I must say, the issue appeared after the recent RN upgrade(react-native v0.42 -> react-native v0.50.3)

I have tried using the redux-persist v4 and v5 , both behaves the same way.

current versions:

  "redux-persist": "^5.4.0",
  "redux": "~3.7.2",
  "react": "16.0.0",
  "react-native": "^0.50.1",

Ubuntu
Android

not sure about IOS and other dev OS.

Thanks in Advance.

[rimzici]

As I debugged I could see
storage.getAllKeys inside getStoredState.js file never executes the callback.
I am using AsyncStorage from react-native.

Might be related to 9319 and 9436

[rt2zz]

are you using v5? v5 does not call getAllKeys, so if that is the source of the bug, upgrading from to v5 may resolve it.

Also I recall there have been similar bugs in react-native android in the past (AsyncStorage not working with debugger on). I agree with you assessment, this is likely an upstream issue.

[rimzici]

Okay. Will have to wait till then :)
And reg v5 I have tried that too. In that case

storage.getItem(storageKey).then(function (serialized) {
         ..........................
         ..........................
})

inside getStoredState file.
it never goes inside the promise neither a catch block. So it is again frozen there!

Issue with Asynstorage while debug seem to have fixed in some RN version, now back again!
As you said got to be an upstream issue :)
Thanks.

[JulianKingman]

I was having a problem where I was using the callback to tell my app whether the state had been rehydrated, but if the script ran again and it was already rehydrated (like in the background), it wouldn't fire when I opened it again. It's not perfect, but I set up an interval that checks the persister state and resolves when it's rehydrated, it works pretty well:

const awaitPersister = () =>
  new Promise((resolve) => {
    let n = 0;
    const checkState = setInterval(() => {
      const cacheLoaded = persister.getState().bootstrapped;
      if (cacheLoaded) {
        clearInterval(checkState);
        resolve(true);
      } else {
        n += 1;
        // if 100 seconds have elapsed, something's wrong
        if (n > 10 * 100) {
          Alerts.alert('Its taking too darn long');
          clearInterval(checkState);
          resolve(false);
        }
      }
    }, 100);
  });

[rt2zz]

this could be a great addition to persistStore config. Something like timeout: number which after the timeout is exceeded causes a console.error + immediately bootstrap all persistoids without waiting for state to finish.

persistStore(store, { timeout: 1000 }, (err) => {
  if (err) {
    // handle error
  }
})

[rt2zz]

FYI currently contemplating adding timeout in this PR: #702