Persist and Hydrate a Shopping Cart with useReducer and localStorage

import { useReducer, useEffect, useMemo, useRef } from 'react';
import { cartReducer, initialCart } from './cartReducer';

const STORAGE_KEY = 'cart:v1';

function loadInitialState() {
  if (typeof window === 'undefined') return initialCart;
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (!raw) return initialCart;
    const parsed = JSON.parse(raw);
    return parsed && typeof parsed.items === 'object'
      ? { items: parsed.items }
      : initialCart;
  } catch (err) {
    console.warn('Failed to parse persisted cart, starting fresh', err);
    return initialCart;
  }
}

export function useCart() {
  const [state, dispatch] = useReducer(cartReducer, undefined, loadInitialState);
  const writeTimer = useRef(null);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    clearTimeout(writeTimer.current);
    writeTimer.current = setTimeout(() => {
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
    }, 200);
    return () => clearTimeout(writeTimer.current);
  }, [state]);

  useEffect(() => {
    function onStorage(e) {
      if (e.key !== STORAGE_KEY || !e.newValue) return;
      try {
        const parsed = JSON.parse(e.newValue);
        dispatch({ type: 'HYDRATE', items: parsed.items || {} });
      } catch (_) {}
    }
    window.addEventListener('storage', onStorage);
    return () => window.removeEventListener('storage', onStorage);
  }, []);

  const totals = useMemo(() => {
    const items = Object.values(state.items);
    return {
      count: items.reduce((n, it) => n + it.qty, 0),
      subtotal: items.reduce((n, it) => n + it.qty * it.price, 0),
    };
  }, [state.items]);

  return { state, dispatch, totals };
}

import { createContext, useContext, useMemo } from 'react';
import { useCart } from './useCart';

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const { state, dispatch, totals } = useCart();

  const value = useMemo(() => ({
    items: Object.values(state.items),
    totals,
    addItem: (product, qty = 1) => dispatch({ type: 'ADD_ITEM', product, qty }),
    setQty: (id, qty) => dispatch({ type: 'SET_QTY', id, qty }),
    removeItem: (id) => dispatch({ type: 'REMOVE_ITEM', id }),
    clear: () => dispatch({ type: 'CLEAR' }),
  }), [state.items, totals, dispatch]);

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

export function useCartContext() {
  const ctx = useContext(CartContext);
  if (!ctx) throw new Error('useCartContext must be used within a CartProvider');
  return ctx;
}