Comparte el estado entre Islas

Al construir tu proyecto usando la arquitectura de islas / hidratación parcial, puede que te hayas topado con este problema: Quiero compartir estado entre mis componentes.

Frameworks tales como React o Vue pueden alentar a usar proveedores de “contexto” (“context” providers) para que sea consumido por otros componentes. Pero al hidratar componentes parcialmente dentro de Astro o en Markdown, no puedes usar esos contextos envolventes.

Astro recomienda una solución diferente para el almacenamiento compartido en el lado del cliente: Nano Stores.

Receta relacionada: Comparte el estado entre componentes de Astro

¿Por qué Nano Stores?

Sección titulada ¿Por qué Nano Stores?

La librería Nano Stores te permite crear stores con las que cualquier componente puede interactuar. Recomendamos Nano Stores porque:

• Son livianas. Nano Stores tiene la cantidad mínima de JS que puedas llegar a requerir (menos de 1 KB) con cero dependencias.
• Son framework-agnósticas. ¡Esto significa que puedes compartir estado entre frameworks sin contratiempos! Astro está construido para ser flexible, así que amamos las soluciones que ofrecen una experiencia de desarrollo similar, sin importar tu preferencia.

Aun así, hay otras alternativas a explorar. Entre ellas puedes encontrar:

• Svelte stores incorporadas
• Solid signals fuera de un elemento de contexto
• API de reactividad de Vue
• Enviar eventos personalizados del navegador entre componentes

FAQ

🙋 ¿Puedo usar Nano Stores en archivos .astro u otros archivos del lado del servidor?

Las Nano Stores pueden ser importadas, escritas y leídas desde componentes del lado del servidor, ¡aunque no lo recomendamos!. Esto se debe a ciertas restricciones:

• Escribir en un store desde un archivo .astro o un componente no-hidratado no afectará el valor recibido por un componente del lado del cliente.
• No puedes pasar una Nano Store como “prop” a componentes del lado del cliente.
• No puedes suscribirte a cambios en la store desde un archivo .astro, ya que los componentes de Astro no se re-renderizan.

¡Si entiendes estas restricciones y aun así encuentras un caso de uso, puedes darle una oportunidad a Nano Stores! Solamente recuerda que Nano Stores fue creado específicamente para reaccionar a cambios en el cliente.

🙋 ¿Cómo se comparan las Svelte stores a Nano Stores?

¡Nano Stores y Svelte stores son muy similares! De hecho, nanostores te permite usar el mismo atajo $ para suscripciones que puedes utilizar con las Svelte stores.

Si quieres evitar usar una librería de terceros, Svelte stores es una gran herramienta para la comunicación entre islas. Aun así, puedes llegar a preferir Nano Stores si a) te gustaría añadir add-ons para “objetos” y estado asíncrono, o b) quieres comunicarte entre Svelte y otros frameworks como Preact o Vue.

🙋 ¿Cómo se comparan las Solid signals a Nano Stores?

Si has usado Solid anteriormente, habrás intentado mover signals o stores fuera de tus componentes. ¡Esta es una muy buena manera de compartir estado entre islas de Solid! Intenta exportar signals desde un archivo compartido:

sharedStore.js

import { createSignal } from 'solid-js';

export const sharedCount = createSignal(0);

…y todos los componentes que importen sharedCount compartirán el mismo estado. Aunque esto funciones bien, puedes llegar a preferir Nano Stores si a) te gustaría añadir add-ons para “objetos” y estado asíncrono, o b) quieres comunicarte entre Solid y otros frameworks como Preact or Vue.

Instalando Nano Stores

Sección titulada Instalando Nano Stores

Para empezar, instala Nano Stores junto al paquete helper para tu framework favorito:

Preact

npm install nanostores @nanostores/preact

React

npm install nanostores @nanostores/react

Solid

npm install nanostores @nanostores/solid

Svelte

npm install nanostores

Nota

¡No se necesita paquete helper aquí! Nano Stores puede ser usado como una Svelte store estándar.

Vue

npm install nanostores @nanostores/vue

Lit

npm install nanostores @nanostores/lit

¡Desde aquí, puedes saltar directamente a la guía de uso de Nano Stores, o seguir nuestra guía con ejemplos!

Ejemplo de uso - menú desplegable con carrito de ecommerce

Sección titulada Ejemplo de uso - menú desplegable con carrito de ecommerce

Digamos que queremos construir una interfaz de ecommerce simple con tres elementos interactivos:

• Un formulario para “agregar al carrito”
• Un menú desplegable con carrito para mostrar esos ítems agregados
• Un botón para desplegar el menú con carrito

Prueba el ejemplo terminado en tu máquina u online vía StackBlitz.

Tu archivo base de Astro podría verse así:

src/pages/index.astro

---
import CartFlyoutToggle from '../components/CartFlyoutToggle';
import CartFlyout from '../components/CartFlyout';
import AddToCartForm from '../components/AddToCartForm';
---

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
  <header>
    <nav>
      <a href="/">Tienda de Astro</a>
      <CartFlyoutToggle client:load />
    </nav>
  </header>
  <main>
    <AddToCartForm client:load>
    <!-- ... -->
    </AddToCartForm>
  </main>
  <CartFlyout client:load />
</body>
</html>

Usando “atoms”

Sección titulada Usando “atoms”

Empecemos por abrir nuestro CartFlyout cada vez que cliqueamos en CartFlyoutToggle.

Primero, crea un nuevo archivo JS o TS para nuestro store. Usaremos un “atom” para esto:

src/cartStore.js

import { atom } from 'nanostores';

export const isCartOpen = atom(false);

Ahora, podemos importar este store dentro de cualquier archivo que necesite leer o escribir en ella. Comenzaremos conectando nuestro CartFlyoutToggle:

Preact

src/components/CartFlyoutToggle.jsx

import { useStore } from '@nanostores/preact';
import { isCartOpen } from '../cartStore';

export default function CartButton() {
  // lee el valor del store con el hook `useStore`
  const $isCartOpen = useStore(isCartOpen);
  // escribe en el store importado usando `.set`
  return (
    <button onClick={() => isCartOpen.set(!$isCartOpen)}>Cart</button>
  )
}

React

src/components/CartFlyoutToggle.jsx

import { useStore } from '@nanostores/react';
import { isCartOpen } from '../cartStore';

export default function CartButton() {
  // lee el valor del store con el hook `useStore`
  const $isCartOpen = useStore(isCartOpen);
  // escribe en el store importado usando `.set`
  return (
    <button onClick={() => isCartOpen.set(!$isCartOpen)}>Cart</button>
  )
}

Solid

src/components/CartFlyoutToggle.jsx

import { useStore } from '@nanostores/solid';
import { isCartOpen } from '../cartStore';

export default function CartButton() {
  // lee el valor del store con el hook `useStore`
  const $isCartOpen = useStore(isCartOpen);
  // escribe en el store importado usando `.set`
  return (
    <button onClick={() => isCartOpen.set(!$isCartOpen())}>Cart</button>
  )
}

Svelte

src/components/CartFlyoutToggle.svelte

<script>
  import { isCartOpen } from '../cartStore';
</script>

<!--usa "$" para leer el valor del store-->
<button on:click={() => isCartOpen.set(!$isCartOpen)}>Cart</button>

Vue

src/components/CartFlyoutToggle.vue

<template>
  <!--escribe en el store importado usando `.set`-->
  <button @click="isCartOpen.set(!$isCartOpen)">Cart</button>
</template>

<script setup>
  import { isCartOpen } from '../cartStore';
  import { useStore } from '@nanostores/vue';

  // lee el valor del store con el hook `useStore`
  const $isCartOpen = useStore(isCartOpen);
</script>

Lit

src/components/CartFlyoutToggle.ts

import { LitElement, html } from 'lit';
import { isCartOpen } from '../cartStore';

export class CartFlyoutToggle extends LitElement {
  handleClick() {
    isCartOpen.set(!isCartOpen.get());
  }

  render() {
    return html`
      <button @click="${this.handleClick}">Cart</button>
    `;
  }
}

customElements.define('cart-flyout-toggle', CartFlyoutToggle);

Luego, podemos leer el valor de isCartOpen en nuestro componente CartFlyout:

Preact

src/components/CartFlyout.jsx

import { useStore } from '@nanostores/preact';
import { isCartOpen } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);

  return $isCartOpen ? <aside>...</aside> : null;
}

React

src/components/CartFlyout.jsx

import { useStore } from '@nanostores/react';
import { isCartOpen } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);

  return $isCartOpen ? <aside>...</aside> : null;
}

Solid

src/components/CartFlyout.jsx

import { useStore } from '@nanostores/solid';
import { isCartOpen } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);

  return $isCartOpen() ? <aside>...</aside> : null;
}

Svelte

src/components/CartFlyout.svelte

<script>
  import { isCartOpen } from '../cartStore';
</script>

{#if $isCartOpen}
<aside>...</aside>
{/if}

Vue

src/components/CartFlyout.vue

<template>
  <aside v-if="$isCartOpen">...</aside>
</template>

<script setup>
  import { isCartOpen } from '../cartStore';
  import { useStore } from '@nanostores/vue';

  const $isCartOpen = useStore(isCartOpen);
</script>

Lit

src/components/CartFlyout.ts

import { isCartOpen } from '../cartStore';
import { LitElement, html } from 'lit';
import { StoreController } from '@nanostores/lit';

export class CartFlyout extends LitElement {
  private cartOpen = new StoreController(this, isCartOpen);

  render() {
    return this.cartOpen.value ? html`<aside>...</aside>` : null;
  }
}

customElements.define('cart-flyout', CartFlyout);

Usando “maps”

Sección titulada Usando “maps”

Consejo

¡Los Maps son una muy buena opción para objetos que son escritos regularmente! Junto a los helpers get() y set() estándar que provee un atom, también tendrás una función .setKey() para actualizar keys individuales en objetos.

Ahora, llevemos la cuenta de los ítems que hay dentro de tu carrito. Para evitar duplicados y llevar el registro de la “cantidad”, puedes guardar tu carrito como un objeto con el ID del ítem como key. Usaremos un Map para lograr esto.

Agreguemos un store cartItem a nuestro cartStore.js anterior. También puedes utilizar un archivo TypeScript si deseas definir el tipo de dato.

JavaScript

src/cartStore.js

import { atom, map } from 'nanostores';

export const isCartOpen = atom(false);

/**
* @typedef {Object} CartItem
* @property {string} id
* @property {string} name
* @property {string} imageSrc
* @property {number} quantity
*/

/** @type {import('nanostores').MapStore<Record<string, CartItem>>} */
export const cartItems = map({});

TypeScript

src/cartStore.ts

import { atom, map } from 'nanostores';

export const isCartOpen = atom(false);

export type CartItem = {
  id: string;
  name: string;
  imageSrc: string;
  quantity: number;
}

export const cartItems = map<Record<string, CartItem>>({});

Ahora, exportemos una función helper addCartItem para que usen nuestros componentes.

• Si el ítem no existe en el carrito, añade el carrito con una cantidad inicial de 1.
• Si el ítem ya existe, aumenta la cantidad en 1.

JavaScript

src/cartStore.js

...
export function addCartItem({ id, name, imageSrc }) {
  const existingEntry = cartItems.get()[id];
  if (existingEntry) {
    cartItems.setKey(id, {
      ...existingEntry,
      quantity: existingEntry.quantity + 1,
    })
  } else {
    cartItems.setKey(
      id,
      { id, name, imageSrc, quantity: 1 }
    );
  }
}

TypeScript

src/cartStore.ts

...
type ItemDisplayInfo = Pick<CartItem, 'id' | 'name' | 'imageSrc'>;
export function addCartItem({ id, name, imageSrc }: ItemDisplayInfo) {
  const existingEntry = cartItems.get()[id];
  if (existingEntry) {
    cartItems.setKey(id, {
      ...existingEntry,
      quantity: existingEntry.quantity + 1,
    });
  } else {
    cartItems.setKey(
      id,
      { id, name, imageSrc, quantity: 1 }
    );
  }
}

Nota

🙋 ¿Por qué usamos .get() aquí en vez de un helper useStore?

Habrás notado que estamos llamando a cartItems.get() aquí, en vez de usar el helper useStore de nuestros ejemplos de React / Preact / Solid / Vue. Esto es porque useStore genera re-renderizados. En otras palabras, useStore debe usarse cada vez que el valor del store se renderice en la UI. Como estamos leyendo este valor cuando un evento es accionado (addToCart en este caso), y no estamos intentando renderizar ese valor, en este caso no necesitamos useStore.

Con la store en su lugar, ahora podemos llamar esta función dentro de AddToCartForm cada vez que el formulario es enviado. También desplegaremos el menú con carrito para poder ver un resumen de lo que hay dentro.

Preact

src/components/AddToCartForm.jsx

import { addCartItem, isCartOpen } from '../cartStore';

export default function AddToCartForm({ children }) {
  // ¡usaremos valores fijos por simplicidad!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }

  return (
    <form onSubmit={addToCart}>
      {children}
    </form>
  )
}

React

src/components/AddToCartForm.jsx

import { addCartItem, isCartOpen } from '../cartStore';

export default function AddToCartForm({ children }) {
  // ¡usaremos valores fijos por simplicidad!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }

  return (
    <form onSubmit={addToCart}>
      {children}
    </form>
  )
}

Solid

src/components/AddToCartForm.jsx

import { addCartItem, isCartOpen } from '../cartStore';

export default function AddToCartForm({ children }) {
  // ¡usaremos valores fijos por simplicidad!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }

  return (
    <form onSubmit={addToCart}>
      {children}
    </form>
  )
}

Svelte

src/components/AddToCartForm.svelte

<form on:submit|preventDefault={addToCart}>
  <slot></slot>
</form>

<script>
  import { addCartItem, isCartOpen } from '../cartStore';

  // ¡usaremos valores fijos por simplicidad!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart() {
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }
</script>

Vue

src/components/AddToCartForm.vue

<template>
  <form @submit="addToCart">
    <slot></slot>
  </form>
</template>

<script setup>
  import { addCartItem, isCartOpen } from '../cartStore';

  // ¡usaremos valores fijos por simplicidad!
  const hardcodedItemInfo = {
    id: 'astronaut-figurine',
    name: 'Astronaut Figurine',
    imageSrc: '/images/astronaut-figurine.png',
  }

  function addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(hardcodedItemInfo);
  }
</script>

Lit

src/components/AddToCartForm.ts

import { LitElement, html } from 'lit';
import { isCartOpen, addCartItem } from '../cartStore';

export class AddToCartForm extends LitElement {
  static get properties() {
    return {
      item: { type: Object },
    };
  }

  constructor() {
    super();
    this.item = {};
  }

  addToCart(e) {
    e.preventDefault();
    isCartOpen.set(true);
    addCartItem(this.item);
  }

  render() {
    return html`
      <form @submit="${this.addToCart}">
        <slot></slot>
      </form>
    `;
  }
}
customElements.define('add-to-cart-form', AddToCartForm);

Finalmente, renderizamos los ítems dentro del carrito en nuestro componente CartFlyout:

Preact

src/components/CartFlyout.jsx

import { useStore } from '@nanostores/preact';
import { isCartOpen, cartItems } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);

  return $isCartOpen ? (
    <aside>
      {Object.values($cartItems).length ? (
        <ul>
          {Object.values($cartItems).map(cartItem => (
            <li>
              <img src={cartItem.imageSrc} alt={cartItem.name} />
              <h3>{cartItem.name}</h3>
              <p>Cantidad: {cartItem.quantity}</p>
            </li>
          ))}
        </ul>
      ) : <p>¡Tu carrito está vacío!</p>}
    </aside>
  ) : null;
}

React

src/components/CartFlyout.jsx

import { useStore } from '@nanostores/react';
import { isCartOpen, cartItems } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);

  return $isCartOpen ? (
    <aside>
      {Object.values($cartItems).length ? (
        <ul>
          {Object.values($cartItems).map(cartItem => (
            <li>
              <img src={cartItem.imageSrc} alt={cartItem.name} />
              <h3>{cartItem.name}</h3>
              <p>Cantidad: {cartItem.quantity}</p>
            </li>
          ))}
        </ul>
      ) : <p>¡Tu carrito está vacío!</p>}
    </aside>
  ) : null;
}

Solid

src/components/CartFlyout.jsx

import { useStore } from '@nanostores/solid';
import { isCartOpen, cartItems } from '../cartStore';

export default function CartFlyout() {
  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);

  return $isCartOpen() ? (
    <aside>
      {Object.values($cartItems()).length ? (
        <ul>
          {Object.values($cartItems()).map(cartItem => (
            <li>
              <img src={cartItem.imageSrc} alt={cartItem.name} />
              <h3>{cartItem.name}</h3>
              <p>Cantidad: {cartItem.quantity}</p>
            </li>
          ))}
        </ul>
      ) : <p>¡Tu carrito está vacío!</p>}
    </aside>
  ) : null;
}

Svelte

src/components/CartFlyout.svelte

<script>
  import { isCartOpen, cartItems } from '../cartStore';
</script>

{#if $isCartOpen}
  {#if Object.values($cartItems).length}
    <aside>
      {#each Object.values($cartItems) as cartItem}
      <li>
        <img src={cartItem.imageSrc} alt={cartItem.name} />
        <h3>{cartItem.name}</h3>
        <p>Cantidad: {cartItem.quantity}</p>
      </li>
      {/each}
    </aside>
  {:else}
    <p>¡Tu carrito está vacío!</p>
  {/if}
{/if}

Vue

src/components/CartFlyout.vue

<template>
  <aside v-if="$isCartOpen">
    <ul v-if="Object.values($cartItems).length">
      <li v-for="cartItem in Object.values($cartItems)" v-bind:key="cartItem.name">
        <img :src=cartItem.imageSrc :alt=cartItem.name />
        <h3>{{cartItem.name}}</h3>
        <p>Cantidad: {{cartItem.quantity}}</p>
      </li>
    </ul>
    <p v-else>¡Tu carrito está vacío!</p>
  </aside>
</template>

<script setup>
  import { cartItems, isCartOpen } from '../cartStore';
  import { useStore } from '@nanostores/vue';

  const $isCartOpen = useStore(isCartOpen);
  const $cartItems = useStore(cartItems);
</script>

Lit

src/components/CartFlyout.ts

import { LitElement, html } from 'lit';
import { isCartOpen, cartItems } from '../cartStore';
import { StoreController } from '@nanostores/lit';

export class CartFlyoutLit extends LitElement {
  private cartOpen = new StoreController(this, isCartOpen);
  private getCartItems = new StoreController(this, cartItems);

  renderCartItem(cartItem) {
    return html`
      <li>
        <img src="${cartItem.imageSrc}" alt="${cartItem.name}" />
        <h3>${cartItem.name}</h3>
        <p>Cantidad: ${cartItem.quantity}</p>
      </li>
    `;
  }

  render() {
    return this.cartOpen.value
      ? html`
          <aside>
            ${
              Object.values(this.getCartItems.value).length
                ? html`
                  <ul>
                    ${Object.values(this.getCartItems.value).map((cartItem) =>
                      this.renderCartItem(cartItem)
                    )}
                  </ul>
                `
                : html`<p>¡Su carro está vacío!</p>`
            }
          </aside>
        `
      : null;
  }
}

customElements.define('cart-flyout', CartFlyoutLit);

Ya deberías tener un ejemplo de ecommerce totalmente interactivo con el menor paquete de JS de la galaxia 🚀

¡Prueba el ejemplo terminado en tu máquina u online vía StackBlitz!