React如何实现浏览器刷新后购物车等状态数据持久化

问题核心原因 #

当前代码存在3个直接导致持久化失效的问题：

• 读写localStorage的逻辑全部写在CheckoutPage组件内：如果用户从商品页、首页等非结算页操作购物车，根本不会触发存储逻辑；且组件首次挂载时，监听basket的副作用会先拿到初始空值，直接把本地已存的有效购物车数据覆盖为空。
• useReducer初始化时没有读取本地存储数据，全局状态首次加载默认是空购物车。
• 调用dispatch时直接传入解析后的购物车数组，不符合useReducer要求的{type: 动作类型, payload: 数据}格式，reducer无法识别入参，会直接返回默认空状态甚至抛出控制台错误。

浏览器控制台显示效果

修复步骤 #

1. 改造全局StateProvider，统一处理持久化逻辑 #

把localStorage的读写逻辑全部挪到全局状态层，初始化状态时优先读本地缓存，监听购物车变化全局同步存储，替换原有StateProvider代码：

import React, { createContext, useContext, useReducer, useEffect } from "react";

export const StateContext = createContext();

// 初始化时读取本地缓存的购物车数据
const getInitStateFromStorage = () => {
  const savedBasket = window.localStorage.getItem("basket");
  return {
    basket: savedBasket ? JSON.parse(savedBasket) : [],
  };
};

export const StateProvider = ({ reducer, initialState, children }) => {
  // 合并传入的初始状态和本地缓存数据
  const mergedInitState = { ...initialState, ...getInitStateFromStorage() };
  const [state, dispatch] = useReducer(reducer, mergedInitState);

  // 全局监听购物车变化，任意页面修改购物车都会同步到本地存储
  useEffect(() => {
    window.localStorage.setItem("basket", JSON.stringify(state.basket));
  }, [state.basket]);

  return (
    <StateContext.Provider value={[state, dispatch]}>
      {children}
    </StateContext.Provider>
  );
};
export const useStateValue = () => useContext(StateContext);

2. 确认reducer逻辑正常 #

保留原有加购、移除商品的reducer逻辑即可，不需要额外新增动作类型，参考示例：

// 初始状态其他字段保留原有配置即可
export const initialState = {
  basket: [],
  user: null,
  // 其他全局状态字段
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_TO_BASKET":
      return {
        ...state,
        basket: [...state.basket, action.item],
      };
    case "REMOVE_FROM_BASKET":
      // 保留原有商品移除逻辑即可
      const index = state.basket.findIndex(item => item.id === action.id);
      const newBasket = [...state.basket];
      if (index >= 0) newBasket.splice(index, 1);
      return {
        ...state,
        basket: newBasket
      };
    default:
      return state;
  }
};

export default reducer;

3. 清理CheckoutPage的冗余代码 #

把CheckoutPage里之前写的两个操作localStorage的useEffect全部删除，这部分逻辑已经在全局层处理，留着会导致重复执行、数据覆盖问题。清理后组件只需要保留购物车渲染、操作相关的业务代码即可。

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