← Volver al listado de tecnologías

Capítulo 6: Storage Debugging

Por: Siempre Listo
rozenitestorageasyncstoragemmkv

Storage Debugging

El plugin Storage permite inspeccionar y modificar el almacenamiento local en tiempo real.

Storages Soportados

Interfaz del Panel

┌─────────────────────────────────────┐
│ Storage              [Refresh]      │
├─────────────────────────────────────┤
│ AsyncStorage (5 items)              │
│ ├─ user_token: "eyJhbGci..."        │
│ ├─ user_settings: { theme: "dark" } │
│ ├─ onboarding_complete: true        │
│ └─ cart_items: [...]                │
├─────────────────────────────────────┤
│ [Add Key] [Clear All]               │
└─────────────────────────────────────┘

Configuración

import { StoragePlugin } from '@rozenite/storage';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

const storageConfig = {
  adapters: [
    {
      name: 'AsyncStorage',
      adapter: AsyncStorage,
    },
    {
      name: 'MMKV',
      adapter: {
        getItem: (key) => storage.getString(key),
        setItem: (key, value) => storage.set(key, value),
        removeItem: (key) => storage.delete(key),
        getAllKeys: () => storage.getAllKeys(),
      },
    },
  ],
};

<RozeniteProvider
  plugins={[StoragePlugin.configure(storageConfig)]}
>

Edición en Tiempo Real

  1. Haz click en cualquier valor
  2. Edita el JSON o string
  3. Guarda los cambios
  4. La app refleja el cambio inmediatamente

Ejercicio Práctico

Objetivo

Inspeccionar y modificar AsyncStorage desde Rozenite.

Pasos

  1. Guarda varios valores en AsyncStorage
  2. Abre el panel Storage
  3. Edita un valor desde DevTools
  4. Verifica el cambio en la app
Ver solución 
import AsyncStorage from '@react-native-async-storage/async-storage';

function StorageDemo() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    loadTheme();
  }, []);

  const loadTheme = async () => {
    const saved = await AsyncStorage.getItem('theme');
    if (saved) setTheme(saved);
  };

  const saveData = async () => {
    await AsyncStorage.setItem('theme', 'dark');
    await AsyncStorage.setItem('user', JSON.stringify({
      name: 'Juan',
      email: '[email protected]'
    }));
  };

  return (
    <View style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>
      <Button title="Guardar datos" onPress={saveData} />
      <Button title="Recargar tema" onPress={loadTheme} />
    </View>
  );
}

Desde Storage panel, edita theme a "light" o "dark" y presiona Recargar.

Criterios de Éxito

← Volver al listado de tecnologías