Partage d'État

Lors de la construction d’un site web Astro avec l’architecture isolée / hydratation partielle, vous avez peut-être rencontré ce problème : Je veux partager l’état entre mes composants.

Les frameworks d’interface utilisateur comme React ou Vue peuvent encourager l’utilisation de fournisseurs de “contexte” pour que d’autres composants puissent les consommer. Mais lorsque vous hydratez partiellement des composants dans Astro ou Markdown, vous ne pouvez pas utiliser ces enveloppes contextuelles.

Astro recommande une solution différente pour le stockage partagé côté client : les Nano Stores.

Pourquoi Nano Stores ?

Section titled Pourquoi Nano Stores ?

La librairie Nano Stores vous permet de créer des stores avec lesquels n’importe quel composant peut interagir. Nous recommandons Nano Stores car :

  • Ils sont légers. Nano Stores expédie le strict minimum de JS dont vous aurez besoin (moins de 1 Ko) sans aucune dépendance.
  • Ils sont indépendants du framework. Cela signifie que le partage d’état entre les frameworks sera transparent ! Astro est basé sur la flexibilité, nous aimons donc les solutions qui offrent une expérience de développeur similaire, quelle que soit votre préférence.

Pourtant, il existe un certain nombre d’alternatives que vous pouvez explorer. Ceux-ci incluent :

Installer Nano Stores

Section titled Installer Nano Stores

Pour commencer, installez Nano Stores avec leur package d’assistance pour votre framework d’interface utilisateur préféré :

Terminal window
npm install nanostores @nanostores/preact

Vous pouvez aller directement dans le guide d’utilisation de Nano Stores à partir d’ici, ou suivez notre exemple ci-dessous !

Exemple d’utilisation - Menu déroulant pour un panier de e-commerce

Section titled Exemple d’utilisation - Menu déroulant pour un panier de e-commerce

Disons que nous construisons une interface de e-commerce simple avec trois éléments interactifs :

  • Un formulaire de soumission “ajouter au panier”
  • Un menu déroulant du panier pour afficher les articles ajoutés
  • Une bascule de chariot

Essayez l’exemple complété sur votre machine ou en ligne via Stackblitz.

Votre fichier Astro de base peut ressembler à ceci :

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="/">Vitrine Astro</a>
      <CartFlyoutToggle client:load />
    </nav>
  </header>
  <main>
    <AddToCartForm client:load>
    <!-- ... -->
    </AddToCartForm>
  </main>
  <CartFlyout client:load />
</body>
</html>

Utilisation des “atoms”

Section titled Utilisation des “atoms”

Commençons par ouvrir notre CartFlyout chaque fois que CartFlyoutToggle est cliqué.

Tout d’abord, créez un nouveau fichier JS ou TS pour contenir notre store. Nous utiliserons un “atom” pour cela :

src/cartStore.js
import { atom } from 'nanostores';


export const isCartOpen = atom(false);

Maintenant, nous pouvons importer ce store dans n’importe quel fichier qui doit le lire ou y écrire. Nous allons commencer par câbler notre CartFlyoutToggle :

src/components/CartFlyoutToggle.jsx
import { useStore } from '@nanostores/preact';
import { isCartOpen } from '../cartStore';


export default function CartButton() {
  // lire la valeur du store avec le hook `useStore`
  const $isCartOpen = useStore(isCartOpen);
  // écrire dans le store importé en utilisant `.set`
  return (
    <button onClick={() => isCartOpen.set(!$isCartOpen)}>Panier</button>
  )
}

Ensuite, nous pouvons lire isCartOpen à partir de notre composant CartFlyout :

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;
}

Utilisation des “maps”

Section titled Utilisation des “maps”

Maintenant, gardons une trace des articles dans votre panier. Pour éviter les doublons et garder une trace de la “quantité”, nous pouvons stocker votre panier en tant qu’objet avec l’ID de l’article comme clé. Nous utiliserons une Map pour ça.

Ajoutons un magasin cartItem à notre cartStore.js de plus tôt. Vous pouvez également passer à un fichier TypeScript pour définir la forme si vous le souhaitez.

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({});

Maintenant, exportons un assistant addCartItem pour que nos composants l’utilisent.

  • Si cet article n’existe pas dans votre panier, ajoutez l’article avec une quantité de départ de 1.
  • Si cet article existe déjà, augmentez la quantité de 1.
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 }
    );
  }
}

Avec notre store en place, nous pouvons appeler cette fonction dans notre AddToCartForm chaque fois que ce formulaire est soumis. Nous ouvrirons également le menu déroulant du panier afin que vous puissiez voir un résumé complet du panier.

src/components/AddToCartForm.jsx
import { addCartItem, isCartOpen } from '../cartStore';


export default function AddToCartForm({ children }) {
  // nous allons hardcoder les informations sur l'article pour plus de simplicité !


  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>
  )
}

Enfin, nous afficherons ces éléments de panier dans notre CartFlyout :

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>Quantité : {cartItem.quantity}</p>
            </li>
          ))}
        </ul>
      ) : <p>Votre panier est vide !</p>}
    </aside>
  ) : null;
}

Maintenant, vous devriez avoir un exemple de e-commerce entièrement interactif avec le plus petit bundle de JS de la galaxie 🚀

Essayez l’exemple complété sur votre machine ou en ligne via Stackblitz !

More recipes