javascript - 如何更新保存在 LocalStorage 中的 Redux 状态结构

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 不知道 usersPageReducer 的 sorting 键，而且我们从不使用默认状态，因此 sorting 键永远不会添加到 redux 状态。

有没有办法混合 redux 存储，以便它使用默认状态初始化每个 reducer(就像我们没有使用 localStorage 一样)，然后传播存储的状态？

Answer 1

有两个可能的解决方案我可以建议你:-

1. 使用变量来跟踪应用程序的版本(甚至更好的 redux-version )。现在，无论何时更改此变量的值，您的应用程序都会清除用户的 LocalStorage 并使用提供的 redux(或其子部分)的全新结构通过 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

// 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
  })
})

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

P.S:如果您有大型项目，请使用针对此问题构建的 npm 包，例如 react-persist。