React context with useReducer for global state

// contexts/AppContext.tsx
import { createContext, useContext, useReducer, ReactNode } from 'react';

type User = { id: string; email: string; displayName: string };

type AppState = {
  user: User | null;
  theme: 'light' | 'dark';
  apiKey: string | null;
};

type AppAction =
  | { type: 'SET_USER'; payload: User }
  | { type: 'CLEAR_USER' }
  | { type: 'TOGGLE_THEME' }
  | { type: 'SET_API_KEY'; payload: string };

function appReducer(state: AppState, action: AppAction): AppState {
  switch (action.type) {
    case 'SET_USER': return { ...state, user: action.payload };
    case 'CLEAR_USER': return { ...state, user: null, apiKey: null };
    case 'TOGGLE_THEME': return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    case 'SET_API_KEY': return { ...state, apiKey: action.payload };
    default: return state;
  }
}

const AppContext = createContext<{ state: AppState; dispatch: React.Dispatch<AppAction> } | null>(null);

export function AppProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(appReducer, {
    user: null,
    theme: 'light',
    apiKey: null,
  });

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

export function useApp() {
  const context = useContext(AppContext);
  if (!context) throw new Error('useApp must be used within AppProvider');
  return context;
}

// Usage
function UserMenu() {
  const { state, dispatch } = useApp();

  if (!state.user) return <LoginButton />;
  return (
    <div>
      <span>{state.user.displayName}</span>
      <button onClick={() => dispatch({ type: 'CLEAR_USER' })}>Logout</button>
    </div>
  );
}