javascript - 如何以最简单的方式保持 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在初始化存储时调用，并在每次状态更改时调用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 的人）制作的。只需按照步骤操作，它就会为您工作。

快速回答：

1. 在你的项目中添加一个 localstorage.js 文件（如果你有单独的 redux 文件夹，把这个文件放在那里，或者只是把它放在 src 文件夹中）

2. 将此代码粘贴到文件中

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

3. 这里我将状态存储在本地存储中，您也可以将其存储在 cookie 中，使用户无法访问。
4. 然后，如果您在 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());
});

5. 就这样。你完成了。转到浏览器并尽可能多地重新加载。