Como gerenciar o estado em aplicativos Astro

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 uma 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, faça cd no diretório em que 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 dentro do diretório /src na raiz do seu aplicativo. Dentro deste arquivo, use a função atom() das nanostores para criar um armazenamento de notas:

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

A função addNote() 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 é uma abreviação 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 do diretório src/components, crie um novo arquivo chamado NoteAddButton.jsx. Em seguida, cole o seguinte código dentro do arquivo:

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

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.

Agora em seu arquivo pages/index.astro, você precisa importar NoteAddButton e usá-lo dentro das tags

 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>