Как обновить структуру состояния Redux, сохраненного в LocalStorage - PullRequest
Новая
       29

Как обновить структуру состояния Redux, сохраненного в LocalStorage

0 голосов
/ 11 декабря 2018

Я сохраняю часть своего состояния Redux в localStorage, чтобы сохранить его при обновлении страницы.

Как обновить структуру состояния в моем localStorage, если изменилась структура состояния Redux?


Пример:

Это мой файл combReducer: 

// combineReducer

const rootReducer = combineReducers({
  usersPage: usersPageReducer,
  form: formReducer
})

Исходное состояние по умолчанию в моем usersPageReducer выглядит так: 

// usersPageReducer.js

defaultUsersPageState = {
  selectedColumns: ["name", "email"],    
}

Iзагрузите и сохраните в localStorage, используя следующие методы: 

// localStorage.js

export const loadState = () => {
  try {
    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) {
    // to define
  }
}

В моем основном файле я подписываюсь на хранилище и сохраняю фрагмент usersPage состояния.И я создаю хранилище, используя начальное состояние из localStorage: 

// main.js
const persistedState = loadState();
const initialState = { ...persistedState };

const store = createStore(
  rootReducer,
  initialState,
);

store.subscribe(() => {
  saveState({
    usersPage: store.getState().usersPage
  })
})

Теперь представьте, что я хочу изменить свое состояние usersPageReducer по умолчанию, чтобы оно также отслеживало сортировку. 

// usersPageReducer.js

defaultUsersPageState = {
  selectedColumns: ["name", "email"],
  sorting: {"name": "asc"}   
}

Вышеприведенное не сработает, потому что в начале приложения мы гидратируем начальное состояние избыточности из localStorage.Старое начальное состояние превосходит usersPageReducer defaultUsersPageState.

Поскольку localStorage не знает о ключе sorting для usersPageReducer, и мы никогда не используем состояние по умолчанию, ключ sorting никогда не добавляется в состояние избыточности.

Есть ли способ увлажнить хранилище избыточности, чтобы он инициализировал каждый редуктор, используя его состояние по умолчанию (как если бы мы не использовали localStorage), а затем распространял сохраненное состояние?

...