Как да управлявате състояние в Astro приложения

Когато създавате приложение с рамката Astro, може да се чудите как да управлявате състоянието на приложението или да го споделяте между компоненти и рамки. Nano Stores е един от най-добрите държавни мениджъри за Astro, благодарение на факта, че работи с React, Preact, Svelte, Solid, Lit, Angular и Vanilla JS.

Научете как да управлявате състоянието в рамките на Astro проект. Следвайте прости стъпки, за да създадете основно приложение за водене на бележки, което използва Nano Stores за управление на състоянието и споделя състоянието си между React и Solid.js компонент.

Какво е Astro?

Рамката Astro ви позволява да създавате уеб приложения върху популярни UI рамки като React, Preact, Vue или Svelte. Рамката използва архитектура, базирана на компоненти, така че всяка страница в Astro се състои от няколко компонента.

За да ускори времето за зареждане на страницата, рамката свежда до минимум използването на JavaScript от страна на клиента и вместо това предварително изобразява страници на сървъра.

Astro е проектиран да бъде идеалният инструмент за публикуване на уебсайтове, фокусирани върху съдържанието. Помислете за блогове, целеви страници, новинарски уебсайтове и други страници, които се фокусират върху съдържанието вместо върху интерактивността. За компонентите, които маркирате като интерактивни, рамката ще изпрати само минималния JavaScript, необходим за активиране на тази интерактивност.

Инсталиране и настройка

Ако вече имате работещ Astro проект, пропуснете този раздел.

Но ако нямате Astro проект, ще трябва да създадете такъв. Единственото изискване за това е наличието Node.js инсталиран на вашата локална машина за разработка.

За да създадете чисто нов Astro проект, стартирайте командния ред, отидете в директорията, в която искате да създадете проекта си, след което изпълнете следната команда:

 npm create astro@latest

Отговорете „y“, за да инсталирате Astro и въведете име за името на папката на вашия проект. Можете да се обърнете към Astro’s официален урок за настройка ако сте заседнали по пътя.

След като приключите със създаването на проекта, проследете това със следната команда (това добавя React към проекта):

 npx astro add react

И накрая, инсталирайте Nano Stores за React, като изпълните следната команда:

 npm i nanostores @nanostores/react

Все още на вашия терминал, влезте в главната папка на проекта и стартирайте приложението с някоя от следните команди (в зависимост от това коя от тях използвате):

 npm run dev 

Или:

 yarn run dev 

Или:

 pnpm run dev 

Отидете на http://localhost:3000 във вашия уеб браузър, за да видите визуализация на вашия уебсайт.

След като вашият Astro проект е готов, следващата стъпка е да създадете хранилище за данните на приложението.

Създаване на магазин за бележки

Създайте файл с име noteStore.js файл в директорията /src в корена на вашето приложение. Вътре в този файл използвайте функцията atom() от nanostore, за да създадете хранилище за бележки:

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

Функцията addNote() приема бележка като свой аргумент и я съхранява в хранилището за бележки. Той използва оператора за разпространение, когато съхранява бележката, за да избегне мутация на данните. Операторът spread е съкращение на JavaScript за копиране на обекти.

Създаване на потребителски интерфейс на приложението за водене на бележки

Потребителският интерфейс просто ще се състои от вход за събиране на бележката и бутон, който при щракване добавя бележката към магазина.

В директорията src/components създайте нов файл с име NoteAddButton.jsx. След това поставете следния код във файла:

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

Този код добавя бележката към състоянието на компонента, докато въвеждате във входа. След това, когато щракнете върху бутона, той записва бележката в магазина. Той също така грабва бележките от магазина и ги показва в неподреден списък. С този подход бележката ще се покаже на страницата веднага след щракване върху бутона Запазване.

Сега във вашия файл pages/index.astro трябва да импортирате NoteAddButton и да го използвате в

 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>