Sådan administrerer du tilstand i Astro-applikationer

Når du bygger en applikation med Astro-rammeværket, undrer du dig måske over, hvordan du administrerer applikationstilstanden eller deler den mellem komponenter og rammer. Nano Stores er en af ​​de bedste statschefer for Astro, takket være det faktum, at det fungerer med React, Preact, Svelte, Solid, Lit, Angular og Vanilla JS.

Lær, hvordan du administrerer staten i et Astro-projekt. Følg enkle trin for at oprette en grundlæggende note-applikation, der bruger Nano Stores til tilstandsstyring og deler sin tilstand mellem en React- og Solid.js-komponent.

Hvad er Astro?

Astro-rammen giver dig mulighed for at oprette webapplikationer oven på populære UI-frameworks som React, Preact, Vue eller Svelte. Rammen bruger en komponent-baseret arkitektur, så hver side i Astro består af flere komponenter.

For at fremskynde sideindlæsningstiden minimerer frameworket brugen af ​​JavaScript på klientsiden og prærenderer sider på serveren i stedet.

Astro blev designet til at være det ideelle værktøj til at publicere indholdsfokuserede websteder. Tænk på blogs, landingssider, nyhedswebsteder og andre sider, der fokuserer på indhold frem for interaktivitet. For de komponenter, du markerer som interaktive, sender frameworket kun det minimale JavaScript, der er nødvendigt for at aktivere denne interaktivitet.

Installation og opsætning

Hvis du allerede har et Astro-projekt i gang, så spring dette afsnit over.

Men hvis du ikke har et Astro-projekt, skal du oprette et. Det eneste krav til dette er at have Node.js installeret på din lokale udviklingsmaskine.

For at oprette et helt nyt Astro-projekt skal du starte din kommandoprompt, cd ind i den mappe, du vil oprette dit projekt i, og kør derefter følgende kommando:

 npm create astro@latest

Svar “y” for at installere Astro og angiv et navn til dit projekts mappenavn. Du kan henvise til Astro’s officielle opsætningsvejledning hvis du sidder fast undervejs.

Når du er færdig med at oprette projektet, følg det op med følgende kommando (dette tilføjer React til projektet):

 npx astro add react

Til sidst skal du installere Nano Stores for React ved at køre følgende kommando:

 npm i nanostores @nanostores/react

Stadig på din terminal, cd ind i projektets rodmappe og start programmet med en af ​​følgende kommandoer (afhængigt af hvilken af ​​dem du bruger):

 npm run dev 

Eller:

 yarn run dev 

Eller:

 pnpm run dev 

Gå til http://localhost:3000 i din webbrowser for at se en forhåndsvisning af dit websted.

Med hele dit Astro-projekt opsat, er næste trin at oprette en butik for applikationsdataene.

Oprettelse af Note Store

Opret en fil med navnet noteStore.js-filen inde i /src-mappen i dit programs rod. Inde i denne fil skal du bruge atom()-funktionen fra nanostores til at oprette et notelager:

 import { atom } from "nanostores"
export const notes = atom([])
export function addNote(note) {
  notes.set([...notes.get(), note])
  console.log("Added note: ", note.get())
}
 

Funktionen addNote() tager en note ind som sit argument og gemmer den inde i notelageret. Den bruger spredningsoperatoren, når sedlen opbevares for at undgå datamutation. Spredningsoperatoren er en JavaScript-stenografi til kopiering af objekter.

Oprettelse af Note-Taking-appens brugergrænseflade

Brugergrænsefladen vil blot bestå af et input til at indsamle noten og en knap, der, når der klikkes på den, tilføjer noten til butikken.

Inde i src/components-mappen skal du oprette en ny fil med navnet NoteAddButton.jsx. Indsæt derefter 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">Add a note: </label>
      <input type="text" name="note" id="note"
       onChange={(event) => setUserNote(event.target.value)} />
      <button onClick={() => addNote(userNote)}>Add</button>
      <ul>
        {
          $notes.map((note, index) => {
            <li key={index}>{note}</li>
          })
        } 
      </ul>
    </>
  )
}
 

Denne kode tilføjer noten til komponentens tilstand, mens du skriver ind i inputtet. Derefter, når du klikker på knappen, gemmer den noten i butikken. Den griber også noterne fra butikken og viser dem i en uordnet liste. Med denne tilgang vil noten dukke op på siden umiddelbart efter at have klikket på knappen Gem.

Nu i din pages/index.astro-fil, skal du importere NoteAddButton og bruge den i

 import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
  <main>
    <NoteAddButton client:load />
  </main>
</Layout> 

 npx astro add solid

 npm i nanostores @nanostores/solid

 import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"
export default function Notes() {
  const $notes = useStore(notes)
  return(
    <>
      <h1>My notes</h1>
      <ul>
        <For each={notes()} />
          {(note) => <li>{note}</li>}
        </For>
      </ul> 
    </>
  )
}
 

 import NodeAddButton from "../components/NoteAddButton.jsx"
import Nodes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
  <main>
    <NoteAddButton client:load />
    <Notes client:load />
  </main>
</Layout>