Як керувати станом у програмах Astro

Створюючи програму за допомогою фреймворку Astro, вам може бути цікаво, як керувати станом програми чи ділитися ним між компонентами та фреймворками. Nano Stores є одним із найкращих менеджерів стану для Astro, завдяки тому, що він працює з React, Preact, Svelte, Solid, Lit, Angular і Vanilla JS.

Дізнайтеся, як керувати державою в рамках проекту Astro. Дотримуйтеся простих кроків, щоб створити базову програму для створення нотаток, яка використовує Nano Stores для керування станом і ділиться своїм станом між компонентами React і Solid.js.

Що таке Astro?

Фреймворк Astro дозволяє створювати веб-додатки на основі таких популярних інтерфейсів, як React, Preact, Vue або Svelte. Фреймворк використовує компонентну архітектуру, тому кожна сторінка в Astro складається з кількох компонентів.

Щоб пришвидшити час завантаження сторінки, фреймворк мінімізує використання клієнтського JavaScript і натомість попередньо візуалізує сторінки на сервері.

Astro було розроблено як ідеальний інструмент для публікації веб-сайтів, орієнтованих на контент. Подумайте про блоги, цільові сторінки, веб-сайти новин та інші сторінки, які зосереджуються на вмісті, а не на інтерактивності. Для компонентів, які ви позначаєте як інтерактивні, фреймворк надсилатиме лише мінімальний JavaScript, необхідний для ввімкнення цієї інтерактивності.

Встановлення та налаштування

Якщо у вас уже є проект Astro, пропустіть цей розділ.

Але якщо у вас немає проекту Astro, вам потрібно буде його створити. Єдина вимога для цього — наявність Node.js встановлено на вашій локальній машині розробки.

Щоб створити абсолютно новий проект Astro, запустіть командний рядок, перейдіть у каталог, у якому ви хочете створити проект, а потім виконайте таку команду:

 npm create astro@latest

Щоб інсталювати Astro, дайте відповідь «y» і вкажіть ім’я папки вашого проекту. Ви можете звернутися до 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() із nanostors, щоб створити сховище нотаток:

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

Функція addNote() приймає примітку як аргумент і зберігає її в сховищі приміток. Він використовує оператор поширення під час зберігання нотатки, щоб уникнути мутації даних. Оператор розповсюдження — це скорочення 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>