Jak zarządzać stanem w aplikacjach astronomicznych

Budując aplikację za pomocą frameworka Astro, możesz zastanawiać się, jak zarządzać stanem aplikacji lub udostępniać go pomiędzy komponentami i frameworkami. Nano Stores jest jednym z najlepszych menadżerów stanu dla Astro, dzięki temu, że współpracuje z React, Preact, Svelte, Solid, Lit, Angular i Vanilla JS.

Dowiedz się, jak zarządzać stanem w projekcie Astro. Wykonaj proste kroki, aby utworzyć podstawową aplikację do robienia notatek, która wykorzystuje Nano Stores do zarządzania stanem i udostępnia swój stan pomiędzy komponentem React i Solid.js.

Co to jest astro?

Framework Astro umożliwia tworzenie aplikacji internetowych w oparciu o popularne frameworki UI, takie jak React, Preact, Vue czy Svelte. Framework wykorzystuje architekturę opartą na komponentach, dlatego każda strona w Astro składa się z kilku komponentów.

Aby przyspieszyć ładowanie strony, framework minimalizuje użycie JavaScript po stronie klienta i zamiast tego wstępnie renderuje strony na serwerze.

Astro zostało zaprojektowane jako idealne narzędzie do publikowania stron internetowych zorientowanych na treść. Pomyśl o blogach, stronach docelowych, witrynach z wiadomościami i innych stronach, które skupiają się na treści, a nie na interaktywności. W przypadku komponentów oznaczonych jako interaktywne framework wyśle ​​tylko minimalny kod JavaScript niezbędny do umożliwienia tej interaktywności.

Instalacja i konfiguracja

Jeśli masz już uruchomiony projekt Astro, pomiń tę sekcję.

Jeśli jednak nie masz projektu Astro, musisz go utworzyć. Jedynym wymaganiem jest posiadanie Node.js zainstalowany na lokalnej maszynie programistycznej.

Aby utworzyć zupełnie nowy projekt Astro, uruchom wiersz poleceń, przejdź do katalogu, w którym chcesz utworzyć projekt, a następnie uruchom następującą komendę:

 npm create astro@latest

Odpowiedz „y”, aby zainstalować Astro i podaj nazwę folderu swojego projektu. Możesz zwrócić się do Astro oficjalny poradnik konfiguracji jeśli utkniesz po drodze.

Po zakończeniu tworzenia projektu wykonaj następujące polecenie (spowoduje to dodanie React do projektu):

 npx astro add react

Na koniec zainstaluj Nano Stores dla React, uruchamiając następującą komendę:

 npm i nanostores @nanostores/react

Wciąż na terminalu, przejdź do folderu głównego projektu i uruchom aplikację za pomocą dowolnego z poniższych poleceń (w zależności od tego, którego z nich używasz):

 npm run dev 

Lub:

 yarn run dev 

Lub:

 pnpm run dev 

Iść do http://localhost:3000 w przeglądarce internetowej, aby zobaczyć podgląd swojej witryny.

Następnym krokiem po skonfigurowaniu projektu Astro jest utworzenie magazynu danych aplikacji.

Tworzenie magazynu notatek

Utwórz plik o nazwie noteStore.js w katalogu /src w katalogu głównym aplikacji. Wewnątrz tego pliku użyj funkcji atom() z nanostores, aby utworzyć magazyn notatek:

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

Funkcja addNote() przyjmuje notatkę jako argument i przechowuje ją w magazynie notatek. Używa operatora rozprzestrzeniania podczas przechowywania notatki, aby uniknąć mutacji danych. Operator spreadu to skrót JavaScript służący do kopiowania obiektów.

Tworzenie interfejsu użytkownika aplikacji do robienia notatek

Interfejs użytkownika będzie po prostu składał się z danych wejściowych umożliwiających pobranie notatki oraz przycisku, który po kliknięciu dodaje notatkę do sklepu.

W katalogu src/components utwórz nowy plik o nazwie NoteAddButton.jsx. Następnie wklej następujący kod do pliku:

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

Ten kod dodaje notatkę do stanu komponentu podczas wpisywania danych wejściowych. Następnie po kliknięciu przycisku zapisuje notatkę w sklepie. Pobiera także notatki ze sklepu i wyświetla je na nieuporządkowanej liście. Dzięki takiemu podejściu notatka pojawi się na stronie natychmiast po kliknięciu przycisku Zapisz.

Teraz w pliku Pages/index.astro musisz zaimportować NoteAddButton i użyć go w tagach

 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>