Как обновить постоянное избыточное состояние один раз после развертывания на стороне клиента?

Question

Я использую localStorage в качестве своего состояния постоянного приращения, код показан ниже.

export const loadState = () => {
  try {
    // localStorage.clear();
    const serializedState = localStorage.getItem("state");
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};
export const saveState = state => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem("state", serializedState);
  } catch (err) {
    // Ignore write errors.
  }
};

Каждый раз, когда я меняю свой логический редуктор, я должен запускать localStorage.clear(); из-за обновления localStorage, чтобы проект могбеги правильно.Но запускать метод clear каждый раз бесполезно, лучше иметь способ контролировать этот запуск один раз после развертывания проекта на стороне клиента.

Answer 1

Добавьте version к localStorage и сравните, когда инициализировать ваше состояние из ваших редукторов

перед загрузкой своего состояния сохраните номер версии

// When you update your reducers increase this 
// version to 0.2 => 0.3 => 0.4
// this should run before you call loadState
localStorage.setItem('version', '0.3');

export const loadState = () => {
  try {
    const version = localStorage.getItem('version');
    // When you update your reducers change this comparison
    // to the version number you set in localStorage
    if (version !== '0.1') {
      // Let reducers initial the state if the version is not identical
      return undefined; 
    }
    const serializedState = localStorage.getItem('state');
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};

export const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
  } catch (err) {
    // Ignore write errors.
  }
};

Answer 2

Вы можете использовать функцию Migrations из redux-persist.для более подробной информации: https://github.com/rt2zz/redux-persist/blob/master/docs/migrations.md