在React中结合useStateValue()实现Local Storage存储的问题

你的问题出在三个核心点：dispatch调用格式错误、localStorage存储时机不合理，以及初始化逻辑的位置不对。

1. 错误的dispatch调用 #

你直接把localStorage解析出的basket数据传给dispatch，但useStateValue的dispatch需要的是符合reducer定义的action对象，不是原始数据。

假设你的StateProvider里的reducer定义了SET_BASKET类型的action用于初始化购物车：

// StateProvider.js 中的reducer示例
const reducer = (state, action) => {
  switch(action.type) {
    case 'SET_BASKET':
      return {
        ...state,
        basket: action.payload
      };
    // 其他action逻辑（比如ADD_TO_BASKET等）
    default:
      return state;
  }
}

那你需要修改Checkout组件里的第一个useEffect：

React.useEffect(() => {
  const data = localStorage.getItem("my-cart-list");
  if (data) {
    // 发送符合规范的action对象
    dispatch({
      type: 'SET_BASKET',
      payload: JSON.parse(data)
    })
  }
}, [dispatch]);

2. 未设置依赖的useEffect #

第二个useEffect没有依赖数组，会导致组件每次渲染都执行localStorage.setItem，既浪费性能还可能触发不必要的存储操作。应该把basket作为依赖，仅当购物车内容变化时才存储：

React.useEffect(() => {
  // 可选：空数组时可以跳过存储，节省本地空间
  if (basket.length > 0) {
    localStorage.setItem("my-cart-list", JSON.stringify(basket))
  }
}, [basket]);

3. 更合理的初始化方案 #

把初始化逻辑从Checkout组件移到StateProvider组件中，这样不管用户先进入哪个页面，购物车数据都会自动从localStorage加载，而不是只有进入Checkout页面才初始化：

// StateProvider.js
import React, { createContext, useContext, useReducer, useEffect } from 'react';

const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // 组件挂载时加载本地存储的购物车数据
  useEffect(() => {
    const savedBasket = localStorage.getItem("my-cart-list");
    if (savedBasket) {
      dispatch({
        type: 'SET_BASKET',
        payload: JSON.parse(savedBasket)
      });
    }
  }, []);

  // 购物车变化时自动同步到本地存储
  useEffect(() => {
    localStorage.setItem("my-cart-list", JSON.stringify(state.basket));
  }, [state.basket]);

  return (
    <StateContext.Provider value={{ state, dispatch }}>
      {children}
    </StateContext.Provider>
  );
};

export const useStateValue = () => useContext(StateContext);

修改后，你的Checkout组件可以直接移除那两个useEffect，正常使用useStateValue获取basket即可。

为什么普通useState没问题？ #

普通useState可以直接把localStorage数据作为初始值，而useReducer（useStateValue底层一般基于useReducer+Context）必须通过dispatch action来更新状态，不能直接赋值，这就是两者的核心区别。

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