如何以最简单的方式持久化 redux 状态？

Question

刷新我的网站后，我需要在 Redux 中保持状态。什么是最简单的方法来做到这一点？如果可能的话，我宁愿不希望使用 redux-persist。

Answer 1

基本上，您需要两个函数，loadState()和saveState()。

export const loadState = () => {
  try {
    const serializedState = localStorage.getItem("state");
    if (!serializedState) return undefined;
    else return JSON.parse(serializedState);
  } catch(err) {
    return undefined;
  }
};

export const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem("state", serializedState);
  } catch(err) {
    console.log(err);
  }
};

由于浏览器上的一些隐私设置，您需要尝试/捕获。

然后，您必须loadState在初始化存储时调用saveState，store.subscribe()并在每次状态更改时调用以将状态保存到 localStorage。像这样：

const persistedStore = loadState();
const store = createStore(
  // ... your reducers
  persistedStore
);

store.subscribe(() => {
  saveState(store.getState());
});