Jak spravovat stav v Astro aplikacích

Správa stavu aplikace v Astro s využitím Nano Stores

Při vývoji aplikace pomocí frameworku Astro se často naskytne otázka efektivní správy stavu a jeho sdílení mezi jednotlivými komponentami a různými frameworky. Jedním z vynikajících řešení pro správu stavu v Astro je Nano Stores. Tento nástroj je kompatibilní s React, Preact, Svelte, Solid, Lit, Angular a dokonce i s čistým JavaScriptem, což ho činí velmi univerzálním.

V tomto článku se podíváme na to, jak spravovat stav v rámci projektu Astro. Provedeme vás jednoduchými kroky, během kterých vytvoříme základní aplikaci pro psaní poznámek. Tato aplikace bude využívat Nano Stores k řízení stavu a sdílení dat mezi komponentami React a Solid.js.

Co je Astro?

Astro je framework, který umožňuje vytvářet webové aplikace s využitím populárních UI frameworků, jako jsou React, Preact, Vue nebo Svelte. Astro je založeno na komponentové architektuře, což znamená, že každá stránka je tvořena několika komponentami.

Aby se maximalizovala rychlost načítání stránek, Astro omezuje použití JavaScriptu na straně klienta a místo toho provádí předběžné vykreslování stránek na serveru.

Astro je navrženo jako ideální řešení pro webové stránky zaměřené na obsah, jako jsou blogy, vstupní stránky, zpravodajské weby a další weby, kde je důležitý obsah před interaktivitou. U komponent, které jsou označeny jako interaktivní, Astro posílá jen minimální množství JavaScriptu potřebného k zajištění této interaktivity.

Instalace a nastavení

Pokud již máte rozběhnutý projekt Astro, můžete tuto sekci přeskočit.

Pokud ale nemáte projekt Astro, budeme si ho muset vytvořit. Jediný požadavek je mít nainstalovaný Node.js na vašem vývojovém počítači.

Pro vytvoření nového projektu Astro otevřete příkazový řádek, přejděte do složky, kde chcete projekt vytvořit, a spusťte následující příkaz:

npm create astro@latest

Odpovězte "y" pro instalaci Astro a zadejte název pro složku vašeho projektu. V případě potíží se můžete podívat na oficiální návod k nastavení od Astro.

Po dokončení vytváření projektu pokračujte dalším příkazem, který přidá React do projektu:

npx astro add react

Nyní nainstalujte Nano Stores pro React pomocí tohoto příkazu:

npm i nanostores @nanostores/react

Zůstaňte v terminálu, přejděte do kořenového adresáře vašeho projektu a spusťte aplikaci jedním 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

Přejděte na http://localhost:3000 ve vašem prohlížeči, abyste si mohli prohlédnout náhled vašeho webu.

Když je 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 v adresáři /src v kořenovém adresáři vaší aplikace. V tomto souboru použijte funkci atom() z Nano Stores 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() přijímá poznámku jako argument a ukládá ji do úložiště. Při ukládání poznámky používá operátor spread, aby nedošlo k mutaci dat. Operátor spread je zkrácený zápis pro kopírování objektů.

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

Uživatelské rozhraní bude jednoduché a bude obsahovat textové pole pro zadávání poznámek a tlačítko, které po kliknutí přidá poznámku do úložiště.

V adresáři src/components vytvořte nový soubor s názvem NoteAddButton.jsx. Vložte do něj 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ává poznámku do stavu komponenty během psaní do textového pole. Poté, po kliknutí na tlačítko, se poznámka uloží do úložiště. Také se načítají poznámky z úložiště a zobrazují se v neuspořádaném seznamu. Díky tomuto postupu se poznámka zobrazí na stránce okamžitě po kliknutí na tlačítko Uložit.

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

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

Pokud se nyní vrátíte do prohlížeče, uvidíte textové pole a tlačítko vykreslené na stránce. Zadejte něco do textového pole a klikněte na tlačítko Uložit. Poznámka se ihned zobrazí na stránce a zůstane tam i po obnovení prohlížeče.

Sdílení stavu mezi dvěma frameworky

Představte si, že chcete sdílet stav mezi React a Solid.js. První krok je přidání Solid do projektu pomocí tohoto příkazu:

npx astro add solid

Poté přidejte Nano Stores pro Solid.js spuštěním:

npm i nanostores @nanostores/solid

Chcete-li vytvořit uživatelské rozhraní v Solid.js, přejděte do adresáře src/components a vytvořte nový soubor s názvem Notes.js. Otevřete soubor a vytvořte v něm komponentu Notes:

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

V tomto souboru importujete poznámky z úložiště, iterujete přes všechny poznámky a zobrazujete je na stránce.

Pro zobrazení komponenty Note vytvořené pomocí Solid.js přejděte do souboru pages/index.astro, importujte NoteAddButton a Notes a použijte je v rámci značek <main>:

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>

Nyní se vraťte do prohlížeče, zadejte něco do textového pole a klikněte na tlačítko Uložit. Poznámka se objeví na stránce a trvale se zobrazí po každém vykreslení.

Další nové funkce Astro

Pomocí těchto metod můžete efektivně spravovat stav uvnitř vaší Astro aplikace a sdílet jej mezi různými komponentami a frameworky. Astro však nabízí mnoho dalších užitečných funkcí, jako je získávání dat, minimalizace HTML a paralelní vykreslování.