Ao construir um aplicativo com a estrutura Astro, você deve estar se perguntando como gerenciar o estado do aplicativo ou compartilhá-lo entre componentes e estruturas. Nano Stores é um dos melhores gestores de estado para Astro, graças ao fato de trabalhar com React, Preact, Svelte, Solid, Lit, Angular e Vanilla JS.

Aprenda como gerenciar o estado dentro de um projeto Astro. Siga etapas simples para criar um aplicativo básico de anotações que usa Nano Stores para gerenciamento de estado e compartilha seu estado entre um componente React e Solid.js.

O que é Astro?

A estrutura Astro permite que você crie aplicativos da web sobre estruturas de UI populares como React, Preact, Vue ou Svelte. A estrutura usa um arquitetura baseada em componentes, portanto, cada página do Astro consiste em vários componentes.

Para acelerar o tempo de carregamento da página, a estrutura minimiza o uso de JavaScript do lado do cliente e pré-renderiza as páginas no servidor.

O Astro foi projetado para ser a ferramenta ideal para publicação de sites com foco em conteúdo. Pense em blogs, landing pages, sites de notícias e outras páginas que focam no conteúdo em vez da interatividade. Para os componentes marcados como interativos, a estrutura enviará apenas o JavaScript mínimo necessário para ativar essa interatividade.

Instalação e configuração

Se você já tem um projeto Astro instalado e funcionando, pule esta seção.

Mas se você não tiver um projeto Astro, precisará criar um. O único requisito para isso é ter Node.js instalado em sua máquina de desenvolvimento local.

Para criar um projeto Astro totalmente novo, inicie seu prompt de comando, cd no diretório você deseja criar seu projeto e execute o seguinte comando:

npm create astro@latest

Responda "y" para instalar o Astro e forneça um nome para a pasta do seu projeto. Você pode consultar o Astro's tutorial oficial de configuração se você estiver preso no caminho.

Quando terminar de criar o projeto, siga com o seguinte comando (isso adiciona React ao projeto):

npx astro add react

Por fim, instale o Nano Stores for React executando o seguinte comando:

npm i nanostores @nanostores/react

Ainda no seu terminal, faça cd na pasta raiz do projeto e inicie o aplicativo com qualquer um dos seguintes comandos (dependendo de qual deles você está usando):

npm run dev

Ou:

yarn run dev

Ou:

pnpm run dev

Vá para http://localhost: 3000 em seu navegador para ver uma prévia do seu site.

Com seu projeto Astro configurado, o próximo passo é criar um armazenamento para os dados do aplicativo.

Criando o armazenamento de notas

Crie um arquivo chamado noteStore.js arquivo dentro do /src diretório na raiz do seu aplicativo. Dentro deste arquivo, use o átomo() função de nanolojas para criar um armazenamento de notas:

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

O adicionar nota() A função recebe uma nota como argumento e a armazena dentro do armazenamento de notas. Ele usa o operador spread ao armazenar a nota para evitar a mutação dos dados. O operador spread é um Abreviação de JavaScript para copiar objetos.

Criando a IU do aplicativo de anotações

A UI consistirá simplesmente em uma entrada para coletar a nota e um botão que, ao ser clicado, adiciona a nota à loja.

Dentro de origem/componentes diretório, crie um novo arquivo chamado NotaAddButton.jsx. Em seguida, cole o seguinte código dentro do arquivo:

import {useState} from"react"
import {addNote, notes} from"../noteStore"
exportdefaultfunctionNoteAdder() {
const [userNote, setUserNote] = useState('')
return(
 <>
"note">Add a note: </label>
"text" name="note" id="note"
 onChange={(event) => setUserNote(event.target.value)} />
 addNote(userNote)}>Add</button>


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

Este código adiciona a nota ao estado do componente conforme você digita na entrada. Então, ao clicar no botão, ele salva a nota na loja. Ele também pega as notas da loja e as exibe em uma lista não ordenada. Com esta abordagem, a nota aparecerá na página imediatamente após clicar no botão Salvar botão.

Agora em seu páginas/index.astro arquivo, você precisa importar NotaAddButton e usá-lo dentro do Tag:

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

"Welcome to Astro.">


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

Se você voltar ao seu navegador, encontrará o elemento de entrada e o botão renderizados na página. Digite algo na entrada e clique no botão Salvar botão. A nota aparecerá imediatamente na página e persistirá na página mesmo depois de atualizar o navegador.

Compartilhando estado entre duas estruturas

Digamos que você queira compartilhar o estado entre React e Solid.js. A primeira coisa que você precisa fazer é adicionar Solid ao seu projeto executando o seguinte comando:

npx astro add solid

Em seguida, adicione Nano Stores para solid.js executando:

npm i nanostores @nanostores/solid

Para criar a UI em solid.js, entre no origem/componentes diretório e crie um novo arquivo chamado Notas.js. Abra o arquivo e crie o componente Notes dentro dele:

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

Neste arquivo, você importa as notas da loja, percorre cada uma das notas e exibe-as na página.

Para mostrar o acima Observação componente criado com Solid.js, basta acessar seu páginas/index.astro arquivo, importar NotaAddButton e usá-lo dentro do Tag:

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

"Welcome to Astro.">



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

Agora volte ao seu navegador, digite algo na entrada e clique no botão Salvar botão. A nota aparecerá na página e também persistirá entre as renderizações.

Outros novos recursos do Astro

Usando essas técnicas, você pode gerenciar o estado dentro de seu aplicativo Astro e compartilhá-lo entre componentes e estruturas. Mas o Astro tem muitos outros recursos úteis, como coleta de dados, minificação de HTML e renderização paralelizada.