Quando crei un'applicazione con il framework Astro, potresti chiederti come gestire lo stato dell'applicazione o condividerlo tra componenti e framework. Nano Stores è uno dei migliori gestori statali per Astro, grazie al fatto che funziona con React, Preact, Svelte, Solid, Lit, Angular e Vanilla JS.

Scopri come gestire lo stato all'interno di un progetto Astro. Segui semplici passaggi per creare un'applicazione di base per prendere appunti che utilizza Nano Stores per la gestione dello stato e condivide il suo stato tra un componente React e Solid.js.

Cos'è Astro?

Il framework Astro ti consente di creare applicazioni web su framework UI popolari come React, Preact, Vue o Svelte. Il quadro utilizza a architettura basata su componenti, quindi ogni pagina in Astro è composta da diversi componenti.

Per accelerare il tempo di caricamento della pagina, il framework riduce al minimo l'uso di JavaScript lato client e prerenderizza invece le pagine sul server.

Astro è stato progettato per essere lo strumento ideale per la pubblicazione di siti Web incentrati sui contenuti. Pensa a blog, pagine di destinazione, siti Web di notizie e altre pagine che si concentrano sui contenuti piuttosto che sull'interattività. Per i componenti contrassegnati come interattivi, il framework invierà solo il JavaScript minimo necessario per abilitare tale interattività.

Installazione e configurazione

Se hai già un progetto Astro attivo e funzionante, salta questa sezione.

Ma se non hai un progetto Astro, dovrai crearne uno. L'unico requisito per questo è avere Node.js installato sul computer di sviluppo locale.

Per creare un nuovissimo progetto Astro, avvia il prompt dei comandi, cd nella directory in cui vuoi creare il tuo progetto, quindi esegui il comando seguente:

npm create astro@latest

Rispondi "y" per installare Astro e fornire un nome per la cartella del tuo progetto. Puoi fare riferimento a Astro tutorial ufficiale sulla configurazione se sei bloccato lungo la strada.

Una volta terminata la creazione del progetto, seguilo con il seguente comando (questo aggiunge React al progetto):

npx astro add react

Infine, installa Nano Stores per React eseguendo il seguente comando:

npm i nanostores @nanostores/react

Sempre sul terminale, entra nella cartella principale del progetto e avvia l'applicazione con uno qualsiasi dei seguenti comandi (a seconda di quale stai utilizzando):

npm run dev

O:

yarn run dev

O:

pnpm run dev

Vai a http://localhost: 3000 nel tuo browser web per vedere un'anteprima del tuo sito web.

Una volta configurato il progetto Astro, il passaggio successivo è creare un archivio per i dati dell'applicazione.

Creazione dell'archivio note

Crea un file denominato noteStore.js file all'interno del /src directory nella radice dell'applicazione. All'interno di questo file, utilizzare il file atomo() funzione da nanonegozi per creare un archivio di note:

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

IL Aggiungi nota() La funzione accetta una nota come argomento e la memorizza nell'archivio delle note. Utilizza l'operatore spread durante la memorizzazione della nota per evitare la mutazione dei dati. L'operatore di diffusione è a abbreviazione di JavaScript per copiare oggetti.

Creazione dell'interfaccia utente dell'app per prendere appunti

L'interfaccia utente sarà composta semplicemente da un input per raccogliere la nota e da un pulsante che, se cliccato, aggiunge la nota allo store.

Dentro il origine/componenti directory, creare un nuovo file denominato NoteAddButton.jsx. Successivamente, incolla il seguente codice all'interno del file:

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

Questo codice aggiunge la nota allo stato del componente mentre digiti nell'input. Quindi, quando fai clic sul pulsante, la nota viene salvata nel negozio. Prende anche le note dal negozio e le visualizza all'interno di un elenco non ordinato. Con questo approccio, la nota verrà visualizzata sulla pagina immediatamente dopo aver fatto clic su Salva pulsante.

Adesso nel tuo pagine/index.astro file, è necessario importarlo NotaAddButton e usarlo all'interno del tag:

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

"Welcome to Astro.">


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

Se ora torni al browser, troverai l'elemento di input e il pulsante visualizzati nella pagina. Digita qualcosa nell'input e fai clic su Salva pulsante. La nota verrà immediatamente visualizzata sulla pagina e persisterà sulla pagina anche dopo aver aggiornato il browser.

Condivisione dello stato tra due framework

Supponiamo che tu voglia condividere lo stato tra React e Solid.js. La prima cosa che devi fare è aggiungere Solid al tuo progetto eseguendo il seguente comando:

npx astro add solid

Successivamente, aggiungi Nano Stores per solid.js eseguendo:

npm i nanostores @nanostores/solid

Per creare l'interfaccia utente in solid.js, vai all'interno del file origine/componenti directory e creare un nuovo file denominato Notes.js. Apri il file e crea il componente Notes al suo interno:

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

In questo file, importi le note dallo store, scorri ciascuna nota e la visualizzi sulla pagina.

Per mostrare quanto sopra Nota componente creato con Solid.js, vai semplicemente al tuo pagine/index.astro archiviare, importare NotaAddButton e usarlo all'interno del tag:

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

"Welcome to Astro.">



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

Ora torna al tuo browser, digita qualcosa nell'input e fai clic su Salva pulsante. La nota verrà visualizzata sulla pagina e persisterà anche tra i rendering.

Altre nuove funzionalità di Astro

Utilizzando queste tecniche, puoi gestire lo stato all'interno della tua applicazione Astro e condividerlo tra componenti e framework. Ma Astro ha molte altre utili funzionalità come la raccolta dati, la minimizzazione HTML e il rendering parallelizzato.