Endless loop

[vickysongang]

handleStorageEvent will be endless loop when the count of tab is more than two

[Gycianka]

Idk if you still need but this seems to fix endless loop when you have more then two tabs/windows open. It just ignore store persist on inactive tabs/windows.

import { KEY_PREFIX } from 'redux-persist/constants';

const CrossTabSync = (persistor) => {
  let isFocused = (document.hasFocus) ? document.hasFocus() : true;

  // If window is active - persis store changes.
  window.addEventListener('focus', () => {
    persistor.resume();
    isFocused = true;
  }, false);

  // If window isn't active - stop persisting store changes.
  window.addEventListener('blur', () => {
    persistor.pause();
    isFocused = false;
  }, false);

  const handleStorageEvent = (event) => {
    if (isFocused) {
      return;
    }

    // IE.
    const realEvent = event || window.event;

    // If key is not from redux-persist.
    const { key } = realEvent;
    if (!key.startsWith(KEY_PREFIX)) {
      return;
    }

    const keySpace = key.substr(KEY_PREFIX.length);
    persistor.rehydrate({
      [keySpace]: realEvent.newValue,
    }, {
      serial: true,
    });
  };

  window.addEventListener('storage', handleStorageEvent, false);
};

export default CrossTabSync;

[irisSchaffer]

I'm having problems with endless loops in IE11, even with only one tab open (originally discussed here: https://github.com/rt2zz/redux-persist/issues/475#issuecomment-345722035)

Not consistently, but every now and then, frequently after changing routes (we use react-router), or also on the initial page load, I get stuck in an infinite loop of persist/REHYDRATE actions being fired. Tested this on browser stack.

If I remove this package, everything works fine.

Versions:

• redux-persist: 4.10.2
• redux-persist-crosstab: 3.6.0

[irisSchaffer]

Added a PR which fixes the problem in the case of IE11. See #16