Question

我将Redux状态的一部分保存在localStorage中，以便可以在页面刷新期间将其保留。

如果Redux状态结构发生变化，如何更新localStorage中的状态结构？

示例：

这是我的CombineReducer文件：

// combineReducer

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

usersPageReducer中的原始默认状态如下：

// usersPageReducer.js

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

我使用以下方法加载并保存到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混合了redux初始状态。旧的初始状态击败了usersPageReducer defaultUsersPageState。

由于localStorage不知道sorting的{{1}}键，并且我们从不使用默认状态，因此usersPageReducer键不会添加到redux状态。

是否有一种方法来充水redux存储，以便它使用其默认状态（就像我们没有使用localStorage一样）初始化每个reducer，然后散布存储的状态？

Answer 1

有两个可能的解决方案我可以建议您：-

1。。使用变量来跟踪应用程序的版本（甚至更好的 redux-version ）。现在，只要更改此变量的值，您的应用程序就会清除用户的LocalStorage，并使用{{提供的全新的redux结构（或其子部分） 1}}，而不是从中加载可用的（陈旧的）数据。

您可以通过多种方式实现这一目标，

defaultUsersPageState

在// localStorage.js export const loadState = (CurrVersion) => { try { // check if version matches or not ... // for first time localStorage.getItem('appVersion') will be null if (CurrVersion !== localStorage.getItem('appVersion')){ localStorage.removeItem('state') // // update the appVersion in LS with current version localStorage.setItem('appVersion', CurrVersion) return undefined; } else{ const serializedState = localStorage.getItem('state') if (serializedState === null) { return undefined; } return JSON.parse(serializedState) } } catch (err) { return undefined } }

中

main.js

明确检查持久数据的结构是否已更改 。如果更改，则可以删除以前的对象，并使用提供的具有更新结构的默认初始状态。但是请记住，此检查需要递归（或深入）完成，您可能会发现lodash对此有用。

P.S：如果您有大型项目，请使用为该问题构建的// change it whenever breaking changes are added and it makes sense const CurrVersion = 'MY-APP-VERSION-2.0' const persistedState = loadState(CurrVersion); const initialState = { ...persistedState }; const store = createStore( rootReducer, initialState, ); store.subscribe(() => { saveState({ usersPage: store.getState().usersPage }) })软件包，例如npm。

如何更新本地存储中存在的Redux状态的结构

1 个答案: