Cum să gestionezi starea în aplicațiile Astro

Când construiți o aplicație cu cadrul Astro, s-ar putea să vă întrebați cum să gestionați starea aplicației sau să o partajați între componente și cadre. Nano Stores este unul dintre cei mai buni manageri de stat pentru Astro, datorită faptului că funcționează cu React, Preact, Svelte, Solid, Lit, Angular și Vanilla JS.

Aflați cum să gestionați statul în cadrul unui proiect Astro. Urmați pași simpli pentru a crea o aplicație de bază pentru luarea de note care să folosească Nano Stores pentru gestionarea stării și să-și partajeze starea între o componentă React și Solid.js.

Ce este Astro?

Cadrul Astro vă permite să creați aplicații web pe deasupra cadrelor de interfață de utilizator populare, cum ar fi React, Preact, Vue sau Svelte. Cadrul folosește o arhitectură bazată pe componente, astfel încât fiecare pagină din Astro constă din mai multe componente.

Pentru a accelera timpul de încărcare a paginii, cadrul minimizează utilizarea JavaScript la nivelul clientului și pre-rendează paginile pe server.

Astro a fost conceput pentru a fi instrumentul ideal pentru publicarea site-urilor web axate pe conținut. Gândiți-vă la bloguri, pagini de destinație, site-uri web de știri și alte pagini care se concentrează pe conținut în detrimentul interactivității. Pentru componentele pe care le marcați ca interactive, cadrul va trimite doar JavaScript-ul minim necesar pentru a activa acea interactivitate.

Instalare și configurare

Dacă aveți deja un proiect Astro în funcțiune, omiteți această secțiune.

Dar dacă nu aveți un proiect Astro, va trebui să creați unul. Singura cerință pentru aceasta este să ai Node.js instalat pe mașina dvs. de dezvoltare locală.

Pentru a crea un proiect Astro nou-nouț, lansați promptul de comandă, cd-ul în directorul în care doriți să creați proiectul, apoi rulați următoarea comandă:

 npm create astro@latest

Răspundeți „y” pentru a instala Astro și furnizați un nume pentru numele folderului proiectului dumneavoastră. Vă puteți referi la Astro’s tutorial oficial de configurare dacă ești blocat pe drum.

După ce ați terminat de creat proiectul, continuați cu următoarea comandă (aceasta adaugă React la proiect):

 npx astro add react

În cele din urmă, instalați Nano Stores pentru React rulând următoarea comandă:

 npm i nanostores @nanostores/react

Încă pe terminal, cd în folderul rădăcină al proiectului și porniți aplicația cu oricare dintre următoarele comenzi (în funcție de care dintre ele o utilizați):

 npm run dev 

Sau:

 yarn run dev 

Sau:

 pnpm run dev 

Mergi la http://localhost:3000 în browserul dvs. web pentru a vedea o previzualizare a site-ului dvs. web.

Cu proiectul dvs. Astro configurat, următorul pas este să creați un magazin pentru datele aplicației.

Crearea magazinului de note

Creați un fișier denumit fișier noteStore.js în directorul /src din rădăcina aplicației dvs. În interiorul acestui fișier, utilizați funcția atom() din nanostores pentru a crea un magazin de note:

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

Funcția addNote() preia o notă ca argument și o stochează în depozitul de note. Folosește operatorul de răspândire atunci când stochează nota pentru a evita mutația datelor. Operatorul de răspândire este o prescurtare JavaScript pentru copierea obiectelor.

Crearea interfeței de utilizare a aplicației de luare de note

Interfața de utilizare va consta pur și simplu dintr-o intrare pentru a colecta nota și un buton care, atunci când este făcut clic, adaugă nota în magazin.

În directorul src/components, creați un fișier nou numit NoteAddButton.jsx. Apoi, lipiți următorul cod în interiorul fișierului:

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

Acest cod adaugă nota la starea componentei pe măsură ce tastați în intrare. Apoi, când faceți clic pe buton, acesta salvează nota în magazin. De asemenea, preia notele din magazin și le afișează într-o listă neordonată. Cu această abordare, nota va apărea pe pagină imediat după ce faceți clic pe butonul Salvare.

Acum, în fișierul pagini/index.astro, trebuie să importați NoteAddButton și să îl utilizați în etichetele

 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>