AsyncStorage

Reactotron permite inspeccionar, editar y limpiar AsyncStorage.

Configuración

import Reactotron from 'reactotron-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

Reactotron
  .setAsyncStorageHandler(AsyncStorage)
  .configure()
  .useReactNative({
    asyncStorage: true,
  })
  .connect();

Funcionalidades

Ver Todos los Valores

En Reactotron: State → AsyncStorage

┌─────────────────────────────────────┐
│ AsyncStorage                        │
├─────────────────────────────────────┤
│ user_token     "eyJhbGciOiJ..."     │
│ user_settings  { theme: "dark" }    │
│ onboarding     true                 │
│ cart           [{ id: 1, ... }]     │
└─────────────────────────────────────┘

Editar Valores

1. Click en el valor
2. Edita el JSON
3. Guarda cambios
4. La app refleja el cambio

Eliminar Keys

Click derecho → Delete key

Limpiar Todo

State → Clear AsyncStorage

Logs de Storage

// Wrapper para logging
const StorageWithLogs = {
  async setItem(key, value) {
    Reactotron.display({
      name: 'STORAGE',
      value: { key, value },
      preview: `SET ${key}`,
    });
    return AsyncStorage.setItem(key, value);
  },

  async getItem(key) {
    const value = await AsyncStorage.getItem(key);
    Reactotron.display({
      name: 'STORAGE',
      value: { key, value },
      preview: `GET ${key}`,
    });
    return value;
  },
};

Ejercicio Práctico

Objetivo

Inspeccionar y modificar AsyncStorage desde Reactotron.

Pasos

1. Configura AsyncStorage en Reactotron
2. Guarda varios valores desde la app
3. Inspecciona valores en Reactotron
4. Edita un valor y verifica en la app

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';

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

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

  const loadSettings = async () => {
    const saved = await AsyncStorage.getItem('settings');
    if (saved) {
      const settings = JSON.parse(saved);
      setTheme(settings.theme);
    }
  };

  const saveSettings = async () => {
    const settings = { theme: 'dark', notifications: true };
    await AsyncStorage.setItem('settings', JSON.stringify(settings));
    setTheme('dark');
  };

  return (
    <View style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>
      <Text>Tema: {theme}</Text>
      <Button title="Guardar Dark" onPress={saveSettings} />
      <Button title="Recargar" onPress={loadSettings} />
    </View>
  );
}

Criterios de Éxito

• AsyncStorage visible
• Valores editables
• Cambios reflejados en app

Navegación

• ← Anterior: Network Requests
• Índice del Tutorial
• Siguiente: Custom Commands →