Hvordan administrere staten i Astro-applikasjoner

Når du bygger en applikasjon med Astro-rammeverket, lurer du kanskje på hvordan du administrerer applikasjonstilstanden eller deler den mellom komponenter og rammeverk. Nano Stores er en av de beste statlige lederne for Astro, takket være det faktum at den fungerer med React, Preact, Svelte, Solid, Lit, Angular og Vanilla JS.

Lær hvordan du administrerer staten i et Astro-prosjekt. Følg enkle trinn for å lage en grunnleggende notatapplikasjon som bruker Nano Stores for tilstandsadministrasjon og deler tilstanden mellom en React- og Solid.js-komponent.

Hva er Astro?

Astro-rammeverket lar deg lage nettapplikasjoner på toppen av populære UI-rammeverk som React, Preact, Vue eller Svelte. Rammeverket bruker en komponentbasert arkitektur, så hver side i Astro består av flere komponenter.

For å øke hastigheten på sidens lastetid, minimerer rammeverket bruken av JavaScript på klientsiden og forhåndsrenderer sider på serveren i stedet.

Astro ble designet for å være det ideelle verktøyet for å publisere innholdsfokuserte nettsteder. Tenk på blogger, landingssider, nyhetsnettsteder og andre sider som fokuserer på innhold fremfor interaktivitet. For komponentene du merker som interaktive, vil rammeverket bare sende det minimale JavaScript som trengs for å aktivere den interaktiviteten.

Installasjon og oppsett

Hvis du allerede har et Astro-prosjekt i gang, hopp over denne delen.

Men hvis du ikke har et Astro-prosjekt, må du opprette et. Det eneste kravet for dette er å ha Node.js installert på din lokale utviklingsmaskin.

For å lage et helt nytt Astro-prosjekt, start ledeteksten, cd inn i katalogen du vil opprette prosjektet i, og kjør deretter følgende kommando:

 npm create astro@latest

Svar «y» for å installere Astro og gi et navn for prosjektets mappenavn. Du kan referere til Astro’s offisiell oppsettopplæring hvis du står fast underveis.

Når du er ferdig med å lage prosjektet, følg det opp med følgende kommando (dette legger React til prosjektet):

 npx astro add react

Til slutt, installer Nano Stores for React ved å kjøre følgende kommando:

 npm i nanostores @nanostores/react

Fortsatt på terminalen din, cd inn i prosjektets rotmappe og start programmet med en av følgende kommandoer (avhengig av hvilken av dem du bruker):

 npm run dev 

Eller:

 yarn run dev 

Eller:

 pnpm run dev 

Gå til http://localhost:3000 i nettleseren for å se en forhåndsvisning av nettstedet ditt.

Når Astro-prosjektet er ferdig konfigurert, er neste trinn å opprette en butikk for applikasjonsdataene.

Opprette notatbutikken

Lag en fil med navnet noteStore.js-filen i /src-katalogen i programmets rot. Inne i denne filen bruker du atom()-funksjonen fra nanobutikker for å lage en notatbutikk:

 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 inn et notat som argument og lagrer det inne i notatlageret. Den bruker spredningsoperatøren når seddelen lagres for å unngå datamutasjon. Spredningsoperatoren er en JavaScript-stenografi for kopiering av objekter.

Opprette brukergrensesnittet for notat-appen

Brukergrensesnittet vil ganske enkelt bestå av en inngang for å samle notatet og en knapp som, når den klikkes, legger notatet til butikken.

Inne i src/components-katalogen, lag en ny fil med navnet NoteAddButton.jsx. Deretter limer du 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">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 koden legger til notatet til komponentens tilstand mens du skriver inn i inndata. Deretter, når du klikker på knappen, lagres notatet i butikken. Den henter også notatene fra butikken og viser dem i en uordnet liste. Med denne tilnærmingen vil notatet vises på siden umiddelbart etter å ha klikket på Lagre-knappen.

Nå i pages/index.astro-filen din, må du importere NoteAddButton og bruke 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>