Redux 中使用 localStorage 存储状态

在前端开发中，状态管理是一个非常重要的问题。Redux 是一个非常流行的状态管理库，它可以帮助我们更好地管理组件之间的状态。在实际开发中，我们通常需要将状态保存到本地，以便在刷新页面或重新打开应用程序时能够恢复状态。这时候，localStorage 就是一个很好的选择。

什么是 localStorage？

localStorage 是 HTML5 中的一个新特性，它提供了一种在浏览器中存储键值对的方法。这些值可以在同一域名下的所有页面中使用，并且在浏览器关闭后仍然存在。localStorage 是一个非常方便的工具，可以用于存储用户的偏好设置、应用程序的配置、用户的登录状态等等。

Redux 中使用 localStorage

在 Redux 中，我们通常将所有状态保存在一个对象中。如果我们想要将这个对象保存到 localStorage 中，我们需要将它转换为一个字符串。我们可以使用 JSON.stringify() 方法将对象转换为字符串，然后使用 localStorage.setItem() 方法将字符串保存到 localStorage 中。

在 Redux 中，我们通常会使用一个中间件来处理状态的持久化。下面是一个简单的例子：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const saveToLocalStorage = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
  } catch (e) {
    console.log(e);
  }
};

const loadFromLocalStorage = () => {
  try {
    const serializedState = localStorage.getItem('state');
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (e) {
    console.log(e);
    return undefined;
  }
};

const persistedState = loadFromLocalStorage();

const store = createStore(
  rootReducer,
  persistedState,
  composeWithDevTools(applyMiddleware(thunk))
);

store.subscribe(() => saveToLocalStorage(store.getState()));

这个例子中，我们定义了两个函数：saveToLocalStorage 和 loadFromLocalStorage。saveToLocalStorage 函数将 Redux store 中的状态保存到 localStorage 中，loadFromLocalStorage 函数从 localStorage 中加载状态并返回它。我们在创建 store 时使用了 persistedState 参数，它表示从 localStorage 中加载的状态。最后，我们在 store 中添加了一个订阅器，每当状态发生变化时就会调用 saveToLocalStorage 函数。

指导意义

使用 localStorage 存储状态是一种非常方便的方法，它可以帮助我们保存应用程序的状态并在需要时恢复它。但是，我们需要注意一些问题：

1. localStorage 的容量是有限的，通常为 5MB。如果我们保存了太多数据，可能会导致浏览器变慢或崩溃。
2. 如果我们在多个页面中使用同一个 localStorage 键，可能会导致冲突。因此，我们需要确保在应用程序中使用唯一的键。
3. 我们应该谨慎地保存敏感数据，如用户登录状态。如果我们保存了这些数据，可能会导致安全问题。

示例代码

下面是一个简单的示例，它演示了如何在 Redux 中使用 localStorage 存储状态：

// www.javascriptcn.com code example
import { createStore } from 'redux';

const ADD_TODO = 'ADD_TODO';

const addTodo = (text) => ({
  type: ADD_TODO,
  payload: {
    text,
  },
});

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
};

const saveToLocalStorage = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('todos', serializedState);
  } catch (e) {
    console.log(e);
  }
};

const loadFromLocalStorage = () => {
  try {
    const serializedState = localStorage.getItem('todos');
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (e) {
    console.log(e);
    return undefined;
  }
};

const persistedState = loadFromLocalStorage();

const store = createStore(reducer, persistedState);

store.subscribe(() => saveToLocalStorage(store.getState()));

store.dispatch(addTodo('Buy milk'));
store.dispatch(addTodo('Walk the dog'));

console.log(store.getState());

在这个例子中，我们创建了一个简单的 Redux store，并定义了一个 ADD_TODO 的 action 和一个 reducer。我们还定义了 saveToLocalStorage 和 loadFromLocalStorage 函数，它们用于保存和加载状态。在创建 store 时，我们使用了 persistedState 参数，它表示从 localStorage 中加载的状态。最后，我们向 store 中分别 dispatch 了两个 ADD_TODO 的 action，并打印了 store 的状态。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d577c2a941bf7134a38ea5