Узнайте, как вы можете использовать управление состоянием для работы ваших приложений Astro.

При создании приложения с помощью платформы Astro вам может быть интересно, как управлять состоянием приложения или распределять его между компонентами и платформами. Nano Stores — один из лучших государственных менеджеров для Astro, благодаря тому, что он работает с React, Preact, Svelte, Solid, Lit, Angular и Vanilla JS.

Узнайте, как управлять состоянием в проекте Astro. Выполните простые шаги, чтобы создать базовое приложение для создания заметок, которое использует Nano Stores для управления состоянием и разделяет свое состояние между компонентами React и Solid.js.

Что такое Астро?

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

Чтобы ускорить загрузку страницы, платформа сводит к минимуму использование клиентского JavaScript и вместо этого выполняет предварительную отрисовку страниц на сервере.

instagram viewer

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 каталог в корне вашего приложения. Внутри этого файла используйте атом() функция от наномагазины чтобы создать хранилище заметок:

import { atom } from"nanostores"
exportconst notes = atom([])
exportfunctionaddNote(note) {
 notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}

добавить заметку() Функция принимает заметку в качестве аргумента и сохраняет ее в хранилище заметок. Он использует оператор распространения при сохранении заметки, чтобы избежать мутации данных. Оператор распространения — это Сокращение JavaScript для копирования объектов.

Создание пользовательского интерфейса приложения для заметок

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

Внутри источник/компоненты каталог, создайте новый файл с именем ПримечаниеAddButton.jsx. Затем вставьте в файл следующий код:

import {useState} from"react"
import {addNote, notes} from"../noteStore"
exportdefaultfunctionNoteAdder() {
const [userNote, setUserNote] = useState('')


return(
 <>


"text" name="note" id="note"
 onChange={(event) => setUserNote(event.target.value)} />


    

     {
     $notes.map((note, index) => {
  • {note}</li>
     })
     } 
     </ul>
     </>
     )
    }
    

    •

Этот код добавляет примечание к состоянию компонента при вводе ввода. Затем, когда вы нажимаете кнопку, заметка сохраняется в магазине. Он также извлекает заметки из хранилища и отображает их в неупорядоченном списке. При таком подходе заметка появится на странице сразу после нажатия кнопки Сохранять кнопка.

Теперь в твоем страницы/index.astro файл, вам нужно импортировать ПримечаниеДобавитьКнопку и использовать его внутри теги:

import NoteAddButton from"../components/NoteAddButton.jsx"

"Welcome to Astro.">


 </main>
</Layout>
// Other code

Если вы теперь вернетесь в браузер, вы увидите элемент ввода и кнопку, отображаемые на странице. Введите что-нибудь в поле ввода и нажмите кнопку Сохранять кнопка. Заметка сразу же появится на странице и сохранится на ней даже после того, как вы обновите браузер.

Совместное использование состояния между двумя платформами

Допустим, вы хотите разделить состояние между React и Solid.js. Первое, что вам нужно сделать, это добавить Solid в свой проект, выполнив следующую команду:

npx astro add solid

Затем добавьте Nano Stores для Solid.js, выполнив:

npm i nanostores @nanostores/solid

Чтобы создать пользовательский интерфейс в Solid.js, зайдите в источник/компоненты каталог и создайте новый файл с именем Notes.js. Откройте файл и создайте внутри него компонент Notes:

import {useStore} from"@nanostores/solid"
import {notes} from"../noteStore"
import {For} from"solid-js"
exportdefaultfunctionNotes() {
const $notes = useStore(notes)
return(
 <>
My notes</h1>
    


     {(note) => <li>{note}li>}
     </For>
     </ul> 
     </>
     )
    }

В этом файле вы импортируете заметки из хранилища, проходите по каждой заметке и отображаете ее на странице.

Чтобы показать вышеизложенное Примечание компонент, созданный с помощью Solid.js, просто перейдите в свой страницы/index.astro файл, импорт ПримечаниеДобавитьКнопку и использовать его внутри теги:

import NodeAddButton from"../components/NoteAddButton.jsx"
import Nodes from"../components/Notes.jsx"

"Welcome to Astro.">



 </main>
</Layout>
// Other code

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

Другие новые возможности Astro

Используя эти методы, вы можете управлять состоянием внутри вашего приложения Astro и делиться им между компонентами и платформами. Но у Astro есть много других полезных функций, таких как сбор данных, минификация HTML и параллельный рендеринг.