Håndtering av applikasjonstilstand i Astro med Nano Stores
Når du utvikler en applikasjon med Astro-rammeverket, kan det oppstå spørsmål om hvordan du best håndterer applikasjonens tilstand, samt hvordan du deler denne tilstanden mellom ulike komponenter og rammeverk. Nano Stores fremstår som en utmerket løsning for tilstandshåndtering i Astro-prosjekter. Dens fleksibilitet tillater sømløs integrasjon med populære rammeverk som React, Preact, Svelte, Solid, Lit, Angular og til og med Vanilla JS.
Denne guiden vil demonstrere hvordan du effektivt kan administrere tilstand i et Astro-prosjekt. Vi skal gjennomgå trinnvise instruksjoner for å lage en enkel notatapplikasjon som benytter Nano Stores for tilstandshåndtering. Videre vil vi utforske hvordan du deler tilstand mellom en React-komponent og en Solid.js-komponent.
Hva er Astro?
Astro-rammeverket er designet for å bygge webapplikasjoner ved hjelp av anerkjente UI-rammeverk som React, Preact, Vue eller Svelte. Med sin komponentbaserte arkitektur, er hver side i et Astro-prosjekt sammensatt av flere komponenter.
For å optimalisere sidens lastehastighet, reduserer rammeverket bruken av JavaScript på klientsiden. I stedet forhåndsrenderes sidene på serveren.
Astro er særlig egnet for publisering av innholdsrike nettsteder som blogger, landingssider, nyhetsnettsteder og andre plattformer der innhold står i fokus. For komponenter som krever interaktivitet, distribuerer Astro kun den minimale mengden JavaScript som er nødvendig for å muliggjøre denne interaktiviteten.
Installasjon og konfigurering
Dersom du allerede har et eksisterende Astro-prosjekt, kan du hoppe over dette avsnittet.
Hvis du derimot ikke har et Astro-prosjekt, må du først opprette et. For å gjøre dette må du ha Node.js installert på din lokale maskin.
For å etablere et nytt Astro-prosjekt, åpne kommandolinjen, naviger til mappen der du ønsker å opprette prosjektet, og kjør følgende kommando:
npm create astro@latest
Bekreft installasjonen av Astro ved å skrive «y» og spesifiser et navn for prosjektmappen. Ved behov kan du konsultere Astro sin offisielle oppstartsveiledning for ytterligere hjelp.
Etter at prosjektet er opprettet, fortsetter du med følgende kommando for å integrere React i prosjektet:
npx astro add react
Til slutt installerer du Nano Stores for React ved å utføre denne kommandoen:
npm i nanostores @nanostores/react
Fortsett i kommandolinjen, naviger til rotmappen for prosjektet, og start applikasjonen med en av de følgende kommandoene, avhengig av hvilken pakkehåndterer du bruker:
npm run dev
Eller:
yarn run dev
Eller:
pnpm run dev
For å se en forhåndsvisning av nettstedet, gå til http://localhost:3000 i din nettleser.
Etter at Astro-prosjektet er konfigurert, er neste skritt å opprette en lagringsplass for applikasjonens data.
Opprettelse av Notatlagring
I /src-katalogen i applikasjonens rot, opprett en fil ved navn noteStore.js. Inne i denne filen, bruk atom()-funksjonen fra Nano Stores for å lage et notat-lager:
import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
addNote()-funksjonen tar et notat som argument og lagrer det i notat-lageret. Den benytter spredningsoperatoren for å unngå datamutasjon når notatet lagres. Spredningsoperatoren er en praktisk JavaScript-metode for å kopiere objekter.
Utvikling av brukergrensesnitt for notatapplikasjonen
Brukergrensesnittet vil bestå av et enkelt inndatafelt for å samle notatet, samt en knapp som, ved klikk, lagrer notatet i lagret.
Opprett en ny fil ved navn NoteAddButton.jsx i src/components-katalogen. Lim inn følgende kode i filen:
import {useState} from "react"
import {addNote, notes} from "../noteStore"
export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Legg til et notat: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Legg til</button>
<ul>
{
notes.get().map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
Denne koden legger til notatet i komponentens tilstand mens du skriver i inndatafeltet. Deretter, når du klikker på knappen, lagres notatet i lagret. Den henter også notater fra lageret og viser dem i en uordnet liste. Med denne tilnærmingen vil notatet umiddelbart vises på siden etter at du har klikket på Lagre-knappen.
Nå i pages/index.astro-filen din, må du importere NoteAddButton og bruke den i <main>-taggene:
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Velkommen til Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
Gå tilbake til nettleseren din, og du vil se inndatafeltet og knappen gjengitt på siden. Skriv noe i inndatafeltet og klikk på Lagre-knappen. Notatet vil umiddelbart vises på siden og vil vedvare selv etter at du har oppdatert nettleseren.
Deling av tilstand mellom to rammeverk
Anta at du ønsker å dele tilstand mellom React og Solid.js. Først må du legge til Solid i prosjektet ditt ved å utføre følgende kommando:
npx astro add solid
Deretter legger du til Nano Stores for Solid.js ved å kjøre:
npm i nanostores @nanostores/solid
For å lage brukergrensesnittet i Solid.js, gå til src/components-katalogen og lag en ny fil ved navn Notes.js. Åpne filen og skap Notes-komponenten inni den:
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"
export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>Mine notater</h1>
<ul>
<For each={$notes()}>
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
I denne filen importerer du notatene fra lagret, går gjennom hvert notat og viser det på siden.
For å vise den ovennevnte Note-komponenten som er opprettet med Solid.js, gå til pages/index.astro-filen din, importer NodeAddButton og Notes, og bruk dem i <main>-taggene:
import NodeAddButton from "../components/NoteAddButton.jsx"
import Notes from "../components/Notes.jsx"
---
<Layout title="Velkommen til Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
Gå tilbake til nettleseren din, skriv noe i inndatafeltet og klikk på Lagre-knappen. Notatet vil vises på siden og vil vedvare mellom gjengivelsene.
Andre nye funksjoner i Astro
Ved hjelp av disse teknikkene kan du administrere tilstanden i din Astro-applikasjon og dele den mellom komponenter og rammeverk. Astro byr også på en rekke andre nyttige funksjoner, slik som datainnsamling, HTML-minifisering og parallell rendring.