Configura stores para estado global en SvelteKit

Concepto clave

Los stores en SvelteKit son contenedores reactivos que permiten compartir estado entre componentes sin necesidad de pasar props manualmente. Piensa en ellos como una caja fuerte compartida en una oficina: cualquier miembro del equipo puede acceder a lo que hay dentro, y cuando alguien cambia su contenido, todos los que estén observando reciben una notificación automática.

A diferencia del estado local de un componente, que vive y muere con él, los stores persisten más allá del ciclo de vida de componentes individuales. Esto es crucial para datos como el usuario autenticado, preferencias de la aplicación o carritos de compra. En aplicaciones full-stack con Server Actions, los stores te permiten sincronizar estado entre cliente y servidor de manera eficiente.

Cómo funciona en la práctica

Imagina que estás construyendo un dashboard con SvelteKit. Necesitas que el nombre del usuario esté disponible en múltiples componentes: barra de navegación, perfil y configuración. Sin stores, tendrías que pasar el nombre como prop a través de varios niveles de componentes (prop drilling). Con stores, creas un store de usuario una vez y lo importas donde lo necesites.

Paso a paso: primero, defines un store en un archivo separado (ej. stores.js). Luego, en cualquier componente, importas el store y usas el prefijo $ para acceder a su valor reactivamente. Cuando actualizas el store con set o update, todos los componentes suscritos se re-renderizan automáticamente. Esto elimina complejidad y mejora el mantenimiento.

Código en acción

Veamos cómo crear y usar un store para el tema de la aplicación (claro/oscuro):

// stores/theme.js
import { writable } from 'svelte/store';

// Crear store writable con valor inicial
const theme = writable('light');

// Exportar para usar en componentes
export default theme;

Ahora, usemos este store en un componente:

<script>
  import theme from './stores/theme';
  
  function toggleTheme() {
    // Actualizar el store
    theme.update(current => current === 'light' ? 'dark' : 'light');
  }
</script>

<button on:click={toggleTheme}>
  Cambiar tema
</button>

<p>Tema actual: {$theme}</p>

Errores comunes

• Mutación directa del valor del store: Nunca modifiques $store directamente. Usa siempre store.set() o store.update() para garantizar la reactividad.
• Olvidar el prefijo $ en componentes: Para leer el valor reactivamente, debes usar $store, no solo store. Sin el $, obtienes el objeto store, no su valor.
• Crear stores innecesarios: No uses stores para estado que solo vive en un componente. Usa variables reactivas locales (let con $:) en su lugar.
• No limpiar suscripciones manuales: Si usas store.subscribe() directamente (raro), asegúrate de llamar a la función de limpieza para evitar memory leaks.
• Store demasiado grande: Evita almacenar todo en un solo store. Divide en stores específicos (usuario, UI, datos) para mejor organización.

Checklist de dominio

1. Puedo crear un store writable, readable o derived según la necesidad
2. Sé importar y usar stores en componentes con la sintaxis $store
3. Actualizo stores correctamente usando set() o update()
4. Comprendo cuándo usar store vs estado local del componente
5. Puedo estructurar múltiples stores en una arquitectura escalable
6. Sé sincronizar stores con Server Actions para datos persistentes
7. Puedo debuggear problemas de reactividad en stores

Implementa un store de carrito de compras

En esta práctica, crearás un store para manejar un carrito de compras en una aplicación e-commerce. Sigue estos pasos:

1. Crea un archivo src/stores/cart.js que exporte un store writable. El valor inicial debe ser un array vacío.
2. Define funciones helper en el mismo archivo: addToCart(product), removeFromCart(productId) y clearCart() que actualicen el store.
3. En un componente Product.svelte, importa el store y la función addToCart. Agrega un botón que añada el producto actual al carrito.
4. Crea un componente CartSummary.svelte que muestre el número de items en el carrito usando $cart.length y un botón para vaciar el carrito.
5. Verifica que al añadir productos desde diferentes componentes, el CartSummary se actualice automáticamente.

Pistas

• Recuerda que el store debe contener objetos de producto con al menos un id y nombre
• Usa update() para modificar el array del carrito manteniendo inmutabilidad
• Considera usar structuredClone() o spread operator para evitar mutaciones accidentales

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.