Lors de la création d'une application avec le framework Astro, vous vous demandez peut-être comment gérer l'état de l'application ou le partager entre les composants et les frameworks. Nano Stores est l'un des meilleurs gestionnaires d'état pour Astro, grâce au fait qu'il fonctionne avec React, Preact, Svelte, Solid, Lit, Angular et Vanilla JS.

Apprenez à gérer l'état au sein d'un projet Astro. Suivez des étapes simples pour créer une application de prise de notes de base qui utilise Nano Stores pour la gestion de l'état et partage son état entre un composant React et Solid.js.

Qu’est-ce qu’Astro?

Le framework Astro vous permet de créer des applications Web au-dessus des frameworks d'interface utilisateur populaires tels que React, Preact, Vue ou Svelte. Le cadre utilise un architecture basée sur les composants, donc chaque page dans Astro se compose de plusieurs composants.

Pour accélérer le temps de chargement des pages, le framework minimise l'utilisation de JavaScript côté client et pré-rend les pages sur le serveur.

Astro a été conçu pour être l'outil idéal pour publier des sites Web axés sur le contenu. Pensez aux blogs, aux pages de destination, aux sites Web d’actualités et à d’autres pages axées sur le contenu plutôt que sur l’interactivité. Pour les composants que vous marquez comme interactifs, le framework enverra uniquement le code JavaScript minimal nécessaire pour activer cette interactivité.

Installation et configuration

Si vous avez déjà un projet Astro opérationnel, ignorez cette section.

Mais si vous n'avez pas de projet Astro, vous devrez en créer un. La seule exigence pour cela est d'avoir Noeud.js installé sur votre machine de développement locale.

Pour créer un tout nouveau projet Astro, lancez votre invite de commande, cd dans le répertoire dans lequel vous souhaitez créer votre projet, puis exécutez la commande suivante :

npm create astro@latest

Répondez « y » pour installer Astro et fournissez un nom pour le nom du dossier de votre projet. Vous pouvez vous référer à Astro tutoriel de configuration officiel si vous êtes bloqué en cours de route.

Une fois que vous avez terminé de créer le projet, suivez-le avec la commande suivante (cela ajoute React au projet) :

npx astro add react

Enfin, installez Nano Stores pour React en exécutant la commande suivante :

npm i nanostores @nanostores/react

Toujours sur votre terminal, cd dans le dossier racine du projet et démarrez l'application avec l'une des commandes suivantes (selon celle que vous utilisez) :

npm run dev

Ou:

yarn run dev

Ou:

pnpm run dev

Aller à http://localhost: 3000 dans votre navigateur Web pour voir un aperçu de votre site Web.

Une fois votre projet Astro configuré, l'étape suivante consiste à créer un magasin pour les données de l'application.

Création du magasin de notes

Créez un fichier nommé noteStore.js fichier à l'intérieur du /src répertoire à la racine de votre application. Dans ce fichier, utilisez le atome() fonction de nanostores pour créer un magasin de notes :

import { atom } from"nanostores"
exportconst notes = atom([])
exportfunctionaddNote(note) {
 notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}

Le ajouter une note() La fonction prend une note comme argument et la stocke dans le magasin de notes. Il utilise l'opérateur spread lors du stockage de la note pour éviter la mutation des données. L'opérateur de diffusion est un Raccourci JavaScript pour copier des objets.

Création de l'interface utilisateur de l'application de prise de notes

L'interface utilisateur consistera simplement en une entrée pour collecter la note et un bouton qui, une fois cliqué, ajoute la note au magasin.

À l'intérieur de src/composants répertoire, créez un nouveau fichier nommé NoteAddButton.jsx. Ensuite, collez le code suivant dans le fichier :

import {useState} from"react"
import {addNote, notes} from"../noteStore"
exportdefaultfunctionNoteAdder() {
const [userNote, setUserNote] = useState('')
return(
 <>
"note">Add a note: </label>
"text" name="note" id="note"
 onChange={(event) => setUserNote(event.target.value)} />
 addNote(userNote)}>Add</button>


 {
 $notes.map((note, index) => {
{note}</li>
 })
 } 
 </ul>
 </>
 )
}

Ce code ajoute la note à l'état du composant au fur et à mesure que vous tapez dans l'entrée. Ensuite, lorsque vous cliquez sur le bouton, la note est enregistrée dans le magasin. Il récupère également les notes du magasin et les affiche dans une liste non ordonnée. Avec cette approche, la note apparaîtra sur la page immédiatement après avoir cliqué sur le bouton Sauvegarder bouton.

Maintenant dans votre pages/index.astro fichier, vous devez importer NoteAddButton et utilisez-le dans le Mots clés:

import NoteAddButton from"../components/NoteAddButton.jsx"

"Welcome to Astro.">


 </main>
</Layout>
// Other code

Si vous revenez maintenant à votre navigateur, vous trouverez l'élément de saisie et le bouton affichés sur la page. Tapez quelque chose dans l'entrée et cliquez sur le Sauvegarder bouton. La note apparaîtra immédiatement sur la page et persistera sur la page même après avoir actualisé votre navigateur.

Partage d'état entre deux frameworks

Disons que vous souhaitez partager l'état entre React et Solid.js. La première chose que vous devez faire est d'ajouter Solid à votre projet en exécutant la commande suivante :

npx astro add solid

Ensuite, ajoutez les Nano Stores pour solid.js en exécutant :

npm i nanostores @nanostores/solid

Pour créer l'interface utilisateur dans solid.js, allez dans le src/composants répertoire et créez un nouveau fichier nommé Notes.js. Ouvrez le fichier et créez le composant Notes à l'intérieur :

import {useStore} from"@nanostores/solid"
import {notes} from"../noteStore"
import {For} from"solid-js"
exportdefaultfunctionNotes() {
const $notes = useStore(notes)
return(
 <>
My notes</h1>



 {(note) => <li>{note}li>}
 </For>
 </ul> 
 </>
 )
}

Dans ce fichier, vous importez les notes du magasin, parcourez chacune des notes et l'affichez sur la page.

Pour montrer ce qui précède Note composant créé avec Solid.js, rendez-vous simplement dans votre pages/index.astro fichier, importation NoteAddButton et utilisez-le dans le Mots clés:

import NodeAddButton from"../components/NoteAddButton.jsx"
import Nodes from"../components/Notes.jsx"

"Welcome to Astro.">



 </main>
</Layout>
// Other code

Revenez maintenant à votre navigateur, tapez quelque chose dans la saisie et cliquez sur le bouton Sauvegarder bouton. La note apparaîtra sur la page et persistera également entre les rendus.

Autres nouvelles fonctionnalités d'Astro

Grâce à ces techniques, vous pouvez gérer l'état dans votre application Astro et le partager entre les composants et les frameworks. Mais Astro possède de nombreuses autres fonctionnalités pratiques telles que la collecte de données, la minification HTML et le rendu parallélisé.