如何以最简单的方式持久化 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);
  }
};

由于浏览器上的某些隐私设置，您需要 try/catch。

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

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

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

Answer 2

您可以转到本教程Persisting Redux State。它是由 Dan Abmarov（制作 redux 的人）制作的。只需按照步骤操作即可。

快速回答：

在你的项目中添加一个 localstorage.js 文件（如果你有单独的 redux 文件夹，把这个文件放在那里，否则就把它放在 src 文件夹中）
将此代码粘贴到文件中

  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 serializesState = JSON.stringify(state);
    localStorage.setItem("state", serializesState);
  } catch (err) {
    console.log(err);
  }
};

这里我把状态存储在本地存储，你也可以存储在cookie中，让用户无法访问。
然后，如果您要在 index.js 文件中创建商店，请调用 loadState 并将其作为初始状态传递到 createStore 函数中。我制作了单独的商店文件，所以我的代码有点不同

const persistedState = loadState();

const Middlewares = [thunk];

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  rootReducer,
  persistedState,
  composeEnhancers(applyMiddleware(...Middlewares))
);

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

仅此而已。你完成了。转到浏览器并尽可能多地重新加载。

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

How to persist redux state in the easiest way?

javascript

reactjs

redux

react-redux

redux-persist