useState & useReducer

// useState - UI efêmera em uma tela
const [expanded, setExpanded] = useState(false);

// useReducer - campos relacionados + transições explícitas
type State = { step: 0 | 1 | 2; email: string; error?: string };
type Action =
  | { type: "set_email"; email: string }
  | { type: "next" }
  | { type: "back" }
  | { type: "set_error"; error: string };
 
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "set_email":
      return { ...state, email: action.email, error: undefined };
    case "next":
      return state.step < 2 ? { ...state, step: (state.step + 1) as State["step"] } : state;
    case "back":
      return state.step > 0 ? { ...state, step: (state.step - 1) as State["step"] } : state;
    case "set_error":
      return { ...state, error: action.error };
    default:
      return state;
  }
}
 
const [state, dispatch] = useReducer(reducer, { step: 0, email: "" });

// OnboardingWizard.tsx - useReducer para passos; useState para um toggle simples
import { useReducer, useState } from "react";
import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 
type WizardState = {
  step: 1 | 2 | 3;
  name: string;
  notifications: boolean;
  error?: string;
};
 
type WizardAction =
  | { type: "set_name"; name: string }
  | { type: "toggle_notifications" }
  | { type: "next" }
  | { type: "back" }
  | { type: "submit_error"; error: string }
  | { type: "reset" };
 
const initial: WizardState = { step: 1, name: "", notifications: true };
 
function wizardReducer(state: WizardState, action: WizardAction): WizardState {
  switch (action.type) {
    case "set_name":
      return { ...state, name: action.name, error: undefined };
    case "toggle_notifications":
      return { ...state, notifications: !state.notifications };
    case "next": {
      if (state.step === 1 && state.name.trim().length < 2) {
        return { ...state, error: "O nome deve ter pelo menos 2 caracteres" };
      }
      return state.step < 3 ? { ...state, step: (state.step + 1) as WizardState["step"], error: undefined } : state;
    }
    case "back":
      return state.step > 1 ? { ...state, step: (state.step - 1) as WizardState["step"], error: undefined } : state;
    case "submit_error":
      return { ...state, error: action.error };
    case "reset":
      return initial;
    default:
      return state;
  }
}
 
export function OnboardingWizard({ onComplete }: { onComplete: (payload: WizardState) => void }) {
  const [state, dispatch] = useReducer(wizardReducer, initial);
  const [submitting, setSubmitting] = useState(false);
 
  async function handleFinish() {
    setSubmitting(true);
    try {
      // await saveProfile(state) - mutação via Query em apps de produção
      onComplete(state);
      dispatch({ type: "reset" });
    } catch {
      dispatch({ type: "submit_error", error: "Não foi possível salvar - tente novamente" });
    } finally {
      setSubmitting(false);
    }
  }
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Passo {state.step} de 3</Text>
      {state.error && <Text style={styles.error}>{state.error}</Text>}
 
      {state.step === 1 && (
        <TextInput
          placeholder="Seu nome"
          value={state.name}
          onChangeText={(name) => dispatch({ type: "set_name", name })}
          style={styles.input}
        />
      )}
 
      {state.step === 2 && (
        <Pressable onPress={() => dispatch({ type: "toggle_notifications" })}>
          <Text>Notificações: {state.notifications ? "Ligadas" : "Desligadas"}</Text>
        </Pressable>
      )}
 
      {state.step === 3 && <Text>Revisão: {state.name}</Text>}
 
      <View style={styles.row}>
        {state.step > 1 && (
          <Pressable style={styles.btnSecondary} onPress={() => dispatch({ type: "back" })}>
            <Text>Voltar</Text>
          </Pressable>
        )}
        {state.step < 3 ? (
          <Pressable style={styles.btn} onPress={() => dispatch({ type: "next" })}>
            <Text style={styles.btnLabel}>Próximo</Text>
          </Pressable>
        ) : (
          <Pressable style={styles.btn} onPress={handleFinish} disabled={submitting}>
            <Text style={styles.btnLabel}>{submitting ? "Salvando…" : "Concluir"}</Text>
          </Pressable>
        )}
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { padding: 20, gap: 12 },
  title: { fontSize: 22, fontWeight: "700" },
  error: { color: "#dc2626" },
  input: { borderWidth: 1, borderColor: "#cbd5e1", padding: 12, borderRadius: 8 },
  row: { flexDirection: "row", gap: 8, marginTop: 8 },
  btn: { backgroundColor: "#2563eb", padding: 14, borderRadius: 8, flex: 1 },
  btnSecondary: { padding: 14, borderRadius: 8, borderWidth: 1, borderColor: "#94a3b8" },
  btnLabel: { color: "#fff", fontWeight: "600", textAlign: "center" },
});

const [state, dispatch] = useReducer(reducer, props.initialStep, (step) => ({
  step,
  email: "",
  notifications: true,
}));

// ❌ Não hidrate o reducer a partir de fetch em useEffect
useEffect(() => {
  fetchProfile().then((p) => dispatch({ type: "load_profile", profile: p }));
}, []);
 
// ✅ Query gerencia o perfil; reducer gerencia o rascunho de edição
const { data: profile } = useQuery({ queryKey: ["profile"], queryFn: fetchProfile });
const [draft, dispatch] = useReducer(editReducer, profile ?? emptyDraft);