Al crear una aplicación con el marco Astro, es posible que se pregunte cómo administrar el estado de la aplicación o compartirla entre componentes y marcos. Nano Stores es uno de los mejores administradores estatales de Astro, gracias a que funciona con React, Preact, Svelte, Solid, Lit, Angular y Vanilla JS.

Aprenda a gestionar el estado dentro de un proyecto Astro. Siga pasos sencillos para crear una aplicación básica para tomar notas que utilice Nano Stores para la gestión del estado y comparta su estado entre un componente React y Solid.js.

¿Qué es Astro?

El marco Astro le permite crear aplicaciones web sobre marcos de interfaz de usuario populares como React, Preact, Vue o Svelte. El marco utiliza un arquitectura basada en componentes, por lo que cada página de Astro consta de varios componentes.

Para acelerar el tiempo de carga de la página, el marco minimiza el uso de JavaScript del lado del cliente y, en su lugar, preprocesa las páginas en el servidor.

Astro fue diseñado para ser la herramienta ideal para publicar sitios web centrados en contenido. Piense en blogs, páginas de destino, sitios web de noticias y otras páginas que se centran en el contenido más que en la interactividad. Para los componentes que marque como interactivos, el marco solo enviará el JavaScript mínimo necesario para habilitar esa interactividad.

Instalación y configuración

Si ya tienes un proyecto Astro en funcionamiento, omite esta sección.

Pero si no tienes un proyecto Astro, necesitarás crear uno. El único requisito para ello es tener Nodo.js instalado en su máquina de desarrollo local.

Para crear un nuevo proyecto Astro, inicie el símbolo del sistema, cd en el directorio desea crear su proyecto, luego ejecute el siguiente comando:

npm create astro@latest

Responda "y" para instalar Astro y proporcione un nombre para la carpeta de su proyecto. Puedes consultar Astro's tutorial de configuración oficial si estás atrapado en el camino.

Una vez que haya terminado de crear el proyecto, continúe con el siguiente comando (esto agrega React al proyecto):

npx astro add react

Finalmente, instale Nano Stores para React ejecutando el siguiente comando:

npm i nanostores @nanostores/react

Aún en su terminal, acceda a la carpeta raíz del proyecto e inicie la aplicación con cualquiera de los siguientes comandos (dependiendo de cuál de ellos esté usando):

npm run dev

O:

yarn run dev

O:

pnpm run dev

Ir a http://localhost: 3000 en su navegador web para ver una vista previa de su sitio web.

Con su proyecto Astro configurado, el siguiente paso es crear un almacén para los datos de la aplicación.

Creando la tienda de notas

Crea un archivo llamado notaStore.js archivo dentro del /src directorio en la raíz de su aplicación. Dentro de este archivo, use el átomo() función de nanotiendas para crear una tienda de notas:

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

El añadir la nota() La función toma una nota como argumento y la almacena dentro del almacén de notas. Utiliza el operador de extensión al almacenar la nota para evitar la mutación de datos. El operador de diferencial es un taquigrafía de JavaScript para copiar objetos.

Crear la interfaz de usuario de la aplicación para tomar notas

La interfaz de usuario simplemente consistirá en una entrada para recopilar la nota y un botón que, al hacer clic, agrega la nota a la tienda.

Dentro de origen/componentes directorio, cree un nuevo archivo llamado NotaAddButton.jsx. A continuación, pegue el siguiente código dentro del archivo:

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 agrega la nota al estado del componente a medida que escribe en la entrada. Luego, cuando haces clic en el botón, guarda la nota en la tienda. También toma las notas de la tienda y las muestra dentro de una lista desordenada. Con este enfoque, la nota aparecerá en la página inmediatamente después de hacer clic en el Ahorrar botón.

Ahora en tu páginas/index.astro archivo, necesitas importar NotaAñadirBotón y utilizarlo dentro del etiquetas:

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

"Welcome to Astro.">


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

Si ahora regresa a su navegador, encontrará el elemento de entrada y el botón representados en la página. Escriba algo en la entrada y haga clic en el Ahorrar botón. La nota aparecerá inmediatamente en la página y persistirá en la página incluso después de que actualice su navegador.

Compartir estado entre dos marcos

Supongamos que desea compartir el estado entre React y Solid.js. Lo primero que debes hacer es agregar Solid a tu proyecto ejecutando el siguiente comando:

npx astro add solid

A continuación, agregue Nano Stores para solid.js ejecutando:

npm i nanostores @nanostores/solid

Para crear la interfaz de usuario en solid.js, ingrese al origen/componentes directorio y cree un nuevo archivo llamado Notas.js. Abra el archivo y cree el componente de Notas dentro de él:

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

En este archivo, importa las notas de la tienda, recorre cada una de las notas y las muestra en la página.

Para mostrar lo anterior Nota componente creado con Solid.js, simplemente vaya a su páginas/index.astro archivo, importar NotaAñadirBotón y utilizarlo dentro del etiquetas:

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

"Welcome to Astro.">



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

Ahora regrese a su navegador, escriba algo en la entrada y haga clic en el Ahorrar botón. La nota aparecerá en la página y también persistirá entre renderizaciones.

Otras características nuevas de Astro

Con estas técnicas, puede administrar el estado dentro de su aplicación Astro y compartirlo entre componentes y marcos. Pero Astro tiene muchas otras funciones útiles, como recopilación de datos, minificación de HTML y renderizado en paralelo.