React中如何让useReducer管理的购物车状态刷新后不丢失？

当前购物车状态仅存在内存中，页面刷新后会被重新初始化，要解决这个问题，我们可以利用浏览器的localStorage实现数据持久化，具体调整如下：

1. 从本地存储初始化购物车状态 #

修改initialState，启动时优先读取localStorage中保存的购物车数据：

const CartState = ({ children }) => {
  let items = [];
  // 读取本地存储的购物车数据，解析失败则使用空数组
  const savedCartItems = localStorage.getItem('cartItems');
  const initialState = {
    showCart: false,
    products: items,
    cartItems: savedCartItems ? JSON.parse(savedCartItems) : [],
  };
  const { q } = useQuery({
    queryKey: ["products"],
    queryFn: async () => {
      const data = await getDocs(collection(db, "/products"));
      data.docs.forEach((doc) => {
        let key = doc.id;
        let item = doc.data();
        items.push({ key, item });
      });
    },
  });

  const [state, dispatch] = useReducer(CartReducer, initialState);
  
  // ... 原有函数保持不变
};

2. 同步状态变化到本地存储 #

添加useEffect监听购物车项的变化，每次更新时将数据写入localStorage：

const [state, dispatch] = useReducer(CartReducer, initialState);

// 监听购物车数据变化，实时同步到本地存储
useEffect(() => {
  localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
}, [state.cartItems]);

const addToCart = (item) => {
  dispatch({ type: ADD_TO_CART, payload: item });
};
// ... 其他函数保持不变

3. 可选：在Reducer内部处理持久化 #

如果不想依赖useEffect，也可以直接在Reducer的状态修改逻辑中写入本地存储：

import { SHOW_HIDE_CART, ADD_TO_CART, REMOVE_ITEM } from "../types";

const CartReducer = (state, action) => {
  let newState;
  switch (action.type) {
    case SHOW_HIDE_CART: {
      newState = { ...state, showCart: !state.showCart };
      break;
    }
    case ADD_TO_CART: {
      newState = { ...state, cartItems: [...state.cartItems, action.payload] };
      localStorage.setItem('cartItems', JSON.stringify(newState.cartItems));
      break;
    }
    case REMOVE_ITEM: {
      newState = {
        ...state,
        cartItems: state.cartItems.filter((item) => item.id !== action.payload),
      };
      localStorage.setItem('cartItems', JSON.stringify(newState.cartItems));
      break;
    }
    default:
      newState = state;
  }
  return newState;
};

export default CartReducer;

注意事项 #

• 确保存入localStorage的购物车数据可以被JSON序列化，避免存储函数、Symbol等无法序列化的类型。
• 如果是面向登录用户的电商网站，建议将购物车数据同步到后端服务器，用用户ID关联存储，保证多设备数据一致。
• 商品列表数据来自Firebase查询，刷新后重新请求是合理的，通常商品数据需要保持最新，无需持久化。

内容的提问来源于stack exchange，提问作者boop