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，并在saveState上致电store.subscribe()，以便在每次状态更改时将状态保存到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());
});

仅此而已。大功告成转到浏览器，然后重新加载。

如何以最简单的方式坚持还原状态？

2 个答案: