Estado y AsyncStorage

En mobile, el estado que persiste entre cierres de la app requiere almacenamiento explícito. AsyncStorage es el equivalente de localStorage del web pero asíncrono (retorna Promises): guarda pares clave-valor como strings en el almacenamiento del dispositivo. A diferencia de localStorage que es síncrono y puede bloquear, AsyncStorage nunca bloquea el hilo de UI.

Es ideal para preferencias del usuario, tokens de sesión, o datos simples que deben sobrevivir al cierre de la app.

Zustand es una librería de estado global minimalista (alternativa a Redux) que funciona tanto en web como en React Native. Su API es muy simple: defines un store con un objeto de estado y funciones para modificarlo, y cualquier componente puede leerlo y modificarlo. Para combinar Zustand con AsyncStorage, usas el middleware persist que automáticamente guarda y restaura el estado. Esta combinación (Zustand + AsyncStorage) es el patrón más limpio para estado global persistente en React Native.

import AsyncStorage from "@react-native-async-storage/async-storage";
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

// Store con Zustand + persistencia en AsyncStorage
const useUsuarioStore = create(
  persist(
    (set, get) => ({
      usuario: null,
      token: null,
      temaOscuro: true,
      
      setUsuario: (usuario) => set({ usuario }),
      logout: () => set({ usuario: null, token: null }),
      toggleTema: () => set(state => ({ temaOscuro: !state.temaOscuro })),
      isLoggedIn: () => get().usuario !== null,
    }),
    {
      name: "usuario-storage",
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

// AsyncStorage directo
async function guardarDatos() {
  try {
    await AsyncStorage.setItem("@clave", JSON.stringify({ dato: "valor" }));
  } catch (e) {
    console.error("Error guardando:", e);
  }
}

async function obtenerDatos() {
  try {
    const valor = await AsyncStorage.getItem("@clave");
    return valor ? JSON.parse(valor) : null;
  } catch (e) {
    return null;
  }
}

// Uso en componente
function PerfilScreen() {
  const { usuario, logout, temaOscuro, toggleTema } = useUsuarioStore();
  
  return (
    <View>
      <Text>Hola, {usuario?.nombre}</Text>
      <Switch value={temaOscuro} onValueChange={toggleTema} />
      <TouchableOpacity onPress={logout}>
        <Text>Cerrar sesión</Text>
      </TouchableOpacity>
    </View>
  );
}