When building an application with the Astro framework, you might be wondering how to manage the application state or share it between components and frameworks. Nano Stores is one of the best state managers for Astro, thanks to the fact that it works with React, Preact, Svelte, Solid, Lit, Angular, and Vanilla JS.
Learn how to manage the state within an Astro project. Follow simple steps to create a basic note-taking application that uses Nano Stores for state management and shares its state between a React and Solid.js component.
What Is Astro?
The Astro framework allows you to create web applications on top of popular UI frameworks like React, Preact, Vue, or Svelte. The framework uses acomponent-based architecture, so each page in Astro consists of several components.
To speed up page load time, the framework minimizes the use of client-side JavaScript and prerenders pages on the server instead.
Astro was designed to be the ideal tool for publishing content-focused websites. Think of blogs, landing pages, news websites, and other pages that focus on content over interactivity. For the components that you mark as interactive, the framework will only send the minimal JavaScript needed to enable that interactivity.
Installation and Set-Up
If you already have an Astro project up and running, skip this section.
But if you don’t have an Astro project, you’ll need to create one. The only requirement for this is havingNode.jsinstalled on your local development machine.
To create a brand-new Astro project, launch your command prompt,cd into the directoryyou want to create your project in, then run the following command:
Reply “y” to install Astro and provide a name for your project’s folder name. You can refer to Astro’sofficial set-up tutorialif you’re stuck along the way.
Once you’re done creating the project, follow that up with the following command (this adds React to the project):
Finally, install Nano Stores for React by running the following command:
Still on your terminal, cd into the project’s root folder and start the application with any of the following commands (depending on which of them you’re using):
Go tohttp://localhost:3000in your web browser to see a preview of your website.
With your Astro project all set up, the next step is to create a store for the application data.
Creating the Note Store
Create a file namednoteStore.jsfile inside the/srcdirectory in your application’s root. Inside this file, use theatom()function fromnanostoresto create a notes store:
TheaddNote()function takes in a note as its argument and stores it inside the notes store. It uses the spread operator when storing the note to avoid data mutation. The spread operator is aJavaScript shorthandfor copying objects.
Creating the Note-Taking App’s UI
The UI will simply consist of an input to collect the note and a button that, when clicked, adds the note to the store.
Inside thesrc/componentsdirectory, create a new file namedNoteAddButton.jsx. Next, paste the following code inside the file:
This code adds the note to the component’s state as you type into the input. Then, when you click the button, it saves the note to the store. It also grabs the notes from the store and displays them inside an unordered list. With this approach, the note will show up on the page immediately after clicking theSavebutton.
Now in yourpages/index.astrofile, you need to importNoteAddButtonand use it within thetags:
If you now go back to your browser, you’ll find the input element and button rendered on the page. Type something into the input and click theSavebutton. The note will immediately show up on the page and will persist on the page even after you refresh your browser.
Sharing State Between Two Frameworks
Let’s say you want to share the state between React and Solid.js. The first thing you need to do is add Solid to your project by running the following command:
Next, add the Nano Stores for solid.js by running:
To create the UI in solid.js, go inside thesrc/componentsdirectory and create a new file namedNotes.js.Open the file and create the Notes component inside of it:
In this file, you import the notes from the store, loop through each of the notes and display it on the page.
To show the aboveNotecomponent created with Solid.js, simply go to yourpages/index.astrofile, importNoteAddButtonand use it within thetags:
Now go back to your browser, type something into the input, and click theSavebutton. The note will show up on the page and also persist between renders.
Other New Features of Astro
Using these techniques, you can manage the state inside your Astro application and share it between components and frameworks. But Astro has many other handy features such as data collection, HTML minification, and parallelized rendering.
