Estado compartido entre islas

El problema

Tus islas son piezas independientes: cada una tiene su árbol React/Vue/Svelte y su propio estado local. ¿Y si quieres que dos islas distintas comparten un valor? Por ejemplo, un carrito que se actualiza desde el botón "Añadir" en una parte de la página y se muestra en el contador del header.

Las opciones malas:

• Un store global del framework (Redux, Pinia...). Ata al framework, y dos islas distintas con runtimes separados no comparten contexto.
• Eventos de ventana (dispatchEvent). Funcionan, pero son frágiles y tipan mal.

La opción que recomienda Astro: nanostores.

Por qué nanostores

Nanostores es una librería minúscula (~300 bytes) que ofrece:

• Independencia de framework: el mismo store funciona en React, Vue, Svelte, Solid o JS puro.
• Reactividad transparente: subscribes y te llegan los cambios.
• Cero ceremonias: una primitiva, atom, y la API es .get() y .set().

Crear un store

cartCount es un átomo: un valor reactivo. Los componentes que se suscriban a él se actualizan cuando cambia.

Usarlo desde una isla React

Astro tiene un binding oficial: @nanostores/react (y para Vue, Svelte, etc.).

Usarlo desde otra isla (otro framework)

Las dos islas (React y Vue) comparten exactamente el mismo store. Si haces click en el botón React, el header Vue se actualiza al instante.

Más allá de atom

Nanostores también ofrece:

• map(...) para objetos con campos individuales.
• computed(...) para valores derivados (suma de carrito, totales con IVA...).
• persistentAtom(...) para sincronizar con localStorage.

Tu desafío 🚀

Tienes src/stores/cart.ts vacío. Tu trabajo:

1. Importa atom desde "nanostores".
2. Exporta una constante cartCount inicializada a atom(0).
3. Exporta también una función addItem() que haga cartCount.set(cartCount.get() + 1).

Aunque en este editor no haya islas reales escuchando el store, el código que escribes es exactamente el que pondrías en producción. En un proyecto real, tus componentes React/Vue/Svelte se suscribirían a cartCount con su binding correspondiente.