React State Management with TypeScript

Complex Form State

interface FormState {
  values: Record<string, string>;
  errors: Record<string, string | undefined>;
  touched: Record<string, boolean>;
  isSubmitting: boolean;
}

const initialFormState: FormState = {
  values: {},
  errors: {},
  touched: {},
  isSubmitting: false,
};

useReducer for Complex State

type FormAction =
  | { type: 'SET_FIELD'; payload: { name: string; value: string } }
  | { type: 'SET_ERROR'; payload: { nam