如何在没有任何外部库的情况下将 Redux 状态持久保存在本地存储中？

在这个教程中，我们将学习如何在不依赖于任何外部库的情况下，将 Redux 的状态持久化到本地存储中。我们可以使用普通的 JavaScript 和 Redux 的 API 来完成这个任务。

将状态持久保存到本地存储

我们需要在本地存储 (Local Storage) 中保存状态数据。这可以通过 JavaScript 的 localStorage API 来实现。让我们来创建一个名为 localStorage.js 的新文件，以便存储这个功能：

// 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 {
    // ignore write errors
  }
};

在上面的代码中，我们导出了两个函数。第一个函数 loadState 从 localStorage 中加载并返回存储的状态数据。第二个函数 saveState 接收一个参数 state，将该状态数据序列化并保存到 localStorage 中。

在 Redux 中使用本地存储

接下来，我们需要将之前创建的 localStorage.js 文件导入我们的 Redux 应用程序中。

// index.js
import { createStore } from 'redux';
import todoApp from './reducers';
import { saveState, loadState } from './localStorage';

const persistedState = loadState();

const store = createStore(todoApp, persistedState);

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

在上面的代码中，我们首先从我们之前创建的 localStorage.js 文件中导入了 saveState 和 loadState 函数。然后，我们使用 loadState 函数来加载之前保存的状态数据。接下来，我们将加载的状态数据传递给 createStore 函数，以便在 Redux 中使用该状态。最后，我们通过调用 store.subscribe() 来更新本地存储，并在 Redux 的状态发生变化时保持更新状态。

总结

在本教程中，我们学习了如何在没有任何外部库的情况下，将 Redux 的状态持久保存到本地存储中。我们使用 localStorage 和普通的 JavaScript 函数来实现这个功能，同时利用 Redux 的 subscribe 函数来监视状态变化，并将状态更新保存到本地存储中。

本教程的所有代码都可以在我的 Github 中找到，欢迎访问：https://github.com/Banbendalao/redux-localstorage-tutorial