Astro JS - State Management

Quiz

What is Astro State?

In Astro, state is a built-in object that stores data or information about a component. It is used to manage the data passed to a component. For example, a component can use state to store the userâs name, or to store the current page number. State is also used to manage the data that is fetched from an API or database.

Share State Between Islands

Astro Islands are UI components inside a static HTML page that can be hydrated on demand at client-side. We have already seen how to create and use islands in Astro. Now let's see how to share state between islands.

Step 1: Install nanostore

The Nano Stores library allows you to author stores that any component can interact with. To install the package, run the following command in your terminal:

// For React island
>> npm install nanostores @nanostores/react

// For Vue island
>> npm install nanostores @nanostores/vue

// For Svelte island
>> npm install nanostores @nanostores/svelte

Step 2: Create Store

Next step is to create a store. Letâs say weâre building a simple e-commerce interface with three interactive elements:

An âadd to cartâ submission form
A cart flyout to display those added items
A cart flyout toggle

Example

In the code below, we created a store that will hold the cart items. The store is created using the createStore function from the nanostores library. The store is then exported so that it can be used in other components.

---
import CartFlyoutToggle from '../components/CartFlyoutToggle';
import CartFlyout from '../components/CartFlyout';
import AddToCartForm from '../components/AddToCartForm';
---

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
    <header>
        <nav>
        <a href="/">Astro storefront</a>
        <CartFlyoutToggle client:load />
        </nav>
    </header>
    <main>
        <AddToCartForm client:load>
        <!-- ... -->
        </AddToCartForm>
    </main>
    <CartFlyout client:load />
</body>
</html>

Share State Between Astro Components

We already discussed how to use Components in Astro. Now let's see how to share state between components.

Step 1: Install nanostore

The Nano Stores library allows you to author stores that any component can interact with. To install the package, run the following command in your terminal:

npm install nanostores

Step 2: Create Store

Next step is to create a store. In this example, the store tracks whether a dialog is open or not:

<button id="openDialog">Open</button>

<script>
  import { isOpen } from '../store.js';

  // Set the store to true when the button is clicked
  function openDialog() {
    isOpen.set(true);
  }

  // Add an event listener to the button
  document.getElementById('openDialog').addEventListener('click', openDialog);
</script>

Step 3: Use State in Component

Now, import and use the store in a <script> tag in the components that will share state. The following Button and Dialog components each use the shared isOpen state to control whether a particular <div> is hidden or displayed

<button id="openDialog">Open</button>

<script>
  import { isOpen } from '../store.js';

  // Set the store to true when the button is clicked
  function openDialog() {
    isOpen.set(true);
  }

  // Add an event listener to the button
  document.getElementById('openDialog').addEventListener('click', openDialog);
</script>

Print Page