Jak spravovat stav v Astro aplikacích

Při vytváření aplikace pomocí frameworku Astro vás možná zajímá, jak spravovat stav aplikace nebo jej sdílet mezi komponentami a frameworky. Nano Stores je jedním z nejlepších státních manažerů pro Astro, a to díky tomu, že pracuje s React, Preact, Svelte, Solid, Lit, Angular a Vanilla JS.

Naučte se řídit stát v rámci Astro projektu. Postupujte podle jednoduchých kroků a vytvořte základní aplikaci pro psaní poznámek, která používá Nano Stores pro správu stavu a sdílí svůj stav mezi komponentou React a Solid.js.

Co je Astro?

Framework Astro vám umožňuje vytvářet webové aplikace nad populárními frameworky uživatelského rozhraní, jako jsou React, Preact, Vue nebo Svelte. Rámec používá architekturu založenou na komponentách, takže každá stránka v Astro se skládá z několika komponent.

Aby se urychlila doba načítání stránky, rámec minimalizuje používání JavaScriptu na straně klienta a místo toho předvykresluje stránky na serveru.

Astro bylo navrženo jako ideální nástroj pro publikování obsahově zaměřených webů. Vzpomeňte si na blogy, vstupní stránky, zpravodajské weby a další stránky, které se zaměřují na obsah před interaktivitou. U komponent, které označíte jako interaktivní, framework odešle pouze minimální JavaScript potřebný k aktivaci této interaktivity.

Instalace a nastavení

Pokud již máte spuštěný Astro projekt, tuto sekci přeskočte.

Ale pokud nemáte Astro projekt, budete si ho muset vytvořit. Jediným požadavkem na to je mít Node.js nainstalován na vašem místním vývojovém počítači.

Chcete-li vytvořit zcela nový projekt Astro, spusťte příkazový řádek, cd do adresáře, ve kterém chcete projekt vytvořit, a poté spusťte následující příkaz:

 npm create astro@latest

Chcete-li nainstalovat Astro, odpovězte „y“ a zadejte název pro název složky vašeho projektu. Můžete se obrátit na Astro’s oficiální návod k nastavení pokud uvíznete na cestě.

Jakmile dokončíte vytváření projektu, pokračujte následujícím příkazem (tím přidáte React do projektu):

 npx astro add react

Nakonec nainstalujte Nano Stores for React spuštěním následujícího příkazu:

 npm i nanostores @nanostores/react

Stále na svém terminálu, cd do kořenové složky projektu a spusťte aplikaci kterýmkoli z následujících příkazů (v závislosti na tom, který z nich používáte):

 npm run dev 

Nebo:

 yarn run dev 

Nebo:

 pnpm run dev 

Jít do http://localhost:3000 ve webovém prohlížeči, abyste viděli náhled svého webu.

Když je váš projekt Astro nastaven, dalším krokem je vytvoření úložiště pro data aplikace.

Vytvoření úložiště poznámek

Vytvořte soubor s názvem noteStore.js file v adresáři /src v kořenovém adresáři vaší aplikace. Uvnitř tohoto souboru použijte funkci atom() z nanostore k vytvoření úložiště poznámek:

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

Funkce addNote() bere poznámku jako svůj argument a ukládá ji do úložiště poznámek. Při ukládání poznámky používá operátor spread, aby se zabránilo mutaci dat. Operátor šíření je zkratka JavaScriptu pro kopírování objektů.

Vytvoření uživatelského rozhraní aplikace pro psaní poznámek

Uživatelské rozhraní se bude jednoduše skládat ze vstupu pro shromažďování poznámky a tlačítka, které po kliknutí přidá poznámku do obchodu.

V adresáři src/components vytvořte nový soubor s názvem NoteAddButton.jsx. Dále do souboru vložte následující kód:

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

Tento kód přidá poznámku ke stavu komponenty při psaní do vstupu. Poté, když kliknete na tlačítko, uloží se poznámka do obchodu. Také bere poznámky z obchodu a zobrazuje je v neuspořádaném seznamu. S tímto přístupem se poznámka zobrazí na stránce ihned po kliknutí na tlačítko Uložit.

Nyní ve vašem souboru pages/index.astro musíte importovat NoteAddButton a použít jej v rámci značek

 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>