Kada razvijate aplikaciju koristeći Astro framework, prirodno se postavlja pitanje kako efikasno upravljati stanjem aplikacije i kako ga deliti između različitih komponenti i frameworka. Nano Stores se ističe kao jedan od najefikasnijih upravitelja stanja za Astro, prvenstveno zbog svoje kompatibilnosti sa React, Preact, Svelte, Solid, Lit, Angular i Vanilla JS.
U ovom vodiču, istražićemo kako da upravljate stanjem unutar Astro projekta. Kroz jednostavne korake, kreiraćemo osnovnu aplikaciju za vođenje beleški koja koristi Nano Stores za upravljanje stanjem i deli to stanje između React i Solid.js komponenti.
Šta je Astro?
Astro framework omogućava kreiranje web aplikacija zasnovanih na popularnim UI frameworkovima poput React, Preact, Vue ili Svelte. Arhitektura frameworka se zasniva na komponentama, što znači da se svaka stranica u Astro-u sastoji od skupa komponenti.
Kako bi se ubrzalo vreme učitavanja stranica, Astro minimizira upotrebu JavaScripta na strani klijenta, preferirajući pre-renderovanje stranica na serveru.
Astro je dizajniran kao idealan alat za izradu web lokacija fokusiranih na sadržaj. To obuhvata blogove, landing stranice, news portale i druge stranice koje naglasak stavljaju na sadržaj, a ne na interaktivnost. Za komponente koje su označene kao interaktivne, Astro će poslati samo neophodni minimum JavaScripta.
Instalacija i podešavanje
Ukoliko već imate aktivan Astro projekat, možete preskočiti ovaj odeljak.
U suprotnom, potrebno je kreirati novi Astro projekat. Jedini preduslov za ovo je da na vašoj lokalnoj razvojnoj mašini imate instaliran Node.js.
Da biste kreirali novi Astro projekat, otvorite komandnu liniju, navigirajte do direktorijuma u kojem želite da kreirate projekat, i izvršite sledeću komandu:
npm create astro@latest
Odgovorite sa „y“ kako biste potvrdili instalaciju Astro-a i dajte naziv folderu vašeg projekta. Ako naiđete na poteškoće, možete se poslužiti zvaničnim Astro vodičem za podešavanje.
Nakon što ste kreirali projekat, sledećom komandom dodajte podršku za React (ako je već niste odabrali pri inicijalizaciji projekta):
npx astro add react
Na kraju, instalirajte Nano Stores za React izvršavanjem sledeće komande:
npm i nanostores @nanostores/react
I dalje u terminalu, pređite u osnovni folder projekta i pokrenite aplikaciju koristeći jednu od sledećih komandi (u zavisnosti od vašeg menadžera paketa):
npm run dev
Ili:
yarn run dev
Ili:
pnpm run dev
Otvorite http://localhost:3000 u vašem web pregledaču da biste videli prikaz vaše web stranice.
Sada kada je vaš Astro projekat potpuno konfigurisan, sledeći korak je kreiranje skladišta za podatke aplikacije.
Kreiranje prodavnice beleški
Kreirajte datoteku pod nazivom `noteStore.js` unutar direktorijuma `/src` u korenu vaše aplikacije. U ovoj datoteci, koristite funkciju `atom()` iz `nanostores` da biste kreirali skladište za beleške:
import { atom } from "nanostores"export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
Funkcija `addNote()` prihvata belešku kao argument i pohranjuje je u skladište za beleške. Koristi operator širenja (`…`) prilikom pohranjivanja kako bi izbegla direktnu mutaciju podataka. Operator širenja je skraćenica u JavaScriptu za kopiranje objekata.
Kreiranje korisničkog interfejsa aplikacije za beleženje
Korisnički interfejs (UI) će se jednostavno sastojati od polja za unos za prikupljanje beleške i dugmeta koje, kada se klikne, dodaje belešku u skladište.
Unutar direktorijuma `src/components`, kreirajte novu datoteku pod nazivom `NoteAddButton.jsx`. Zatim, kopirajte sledeći kod u datoteku:
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>
</>
)
}
Ovaj kod dodaje belešku u stanje komponente dok korisnik kuca. Kada se klikne dugme, beleška se pohranjuje u skladište. Takođe, beleške se preuzimaju iz skladišta i prikazuju unutar neuređene liste. Na ovaj način, beleška će se pojaviti na stranici odmah nakon klika na dugme za dodavanje.
Sada, u vašoj datoteci `pages/index.astro`, potrebno je uvesti `NoteAddButton` i koristiti ga unutar `
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
Ako se sada vratite u pretraživač, videćete polje za unos i dugme na stranici. Unesite tekst u polje i kliknite na dugme. Beleška će se odmah pojaviti na stranici i ostaće tamo čak i nakon osvežavanja stranice.
Deljenje stanja između dva frameworka
Pretpostavimo da želite da delite stanje između React-a i Solid.js-a. Prvi korak je da dodate Solid u vaš projekat izvršavanjem sledeće komande:
npx astro add solid
Zatim, dodajte Nano Stores za Solid.js pokretanjem:
npm i nanostores @nanostores/solid
Da biste kreirali korisnički interfejs u Solid.js-u, idite u direktorijum `src/components` i kreirajte novu datoteku pod nazivom `Notes.jsx`. Otvorite datoteku i kreirajte `Notes` komponentu unutar nje:
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>
</>
)
}
U ovoj datoteci, uvozimo beleške iz skladišta, prolazimo kroz svaku belešku i prikazujemo je na stranici.
Da biste prikazali gornju `Note` komponentu kreiranu pomoću Solid.js-a, jednostavno otvorite datoteku `pages/index.astro`, uvezite `NoteAddButton` i koristite je unutar `
import NodeAddButton from "../components/NoteAddButton.jsx"
import Notes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
Sada se vratite u vaš pretraživač, unesite nešto u polje za unos i kliknite na dugme za dodavanje. Beleška će se pojaviti na stranici i takođe će ostati sinhronizovana između renderovanja komponenti.
Druge nove karakteristike Astro-a
Koristeći ove tehnike, možete efikasno upravljati stanjem unutar vaše Astro aplikacije i deliti ga između komponenti i frameworka. Astro nudi i druge korisne funkcije, poput dohvaćanja podataka, minimizacije HTML-a i paralelnog prikazivanja.