Subscribe

Sharing state between frameworks with Astro

โœ๏ธ

How to share state between different frameworks inside Astro

4 Sep, 2022 ยท 3 min read

Since Astro is set up as an island architecture and even can run multiple frameworks at the same time, managing the state is a bit difficult.

We can't solely rely on, for example, context like we do in React or Vue.

This is where Nano Stores come in super handy. I've wanted to try them out ever since I read about them.

This article will look at how we can share a state between a React and Vue component.

If you'd like to follow this article, take the following GitHub branch as your starting point.

Setting up the Nano Stores

The first thing we'll have to install is the actual Nano Stores package.

npm i nanostores

We'll need this base package to set up a store.

Let's go ahead and create a store for the counter we already have in our React and Vue components.

I created a folder called stores and added a counter.js file.

Here we can leverage a Nano Stores atom, which can be used to store small values.

import { atom } from 'nanostores';

const initialValue = { value: 0 };

const counter = atom(initialValue);

const increaseCounter = () => counter.set({ value: counter.get().value + 1 });

const decreaseCounter = () => counter.set({ value: counter.get().value - 1 });

export { counter, increaseCounter, decreaseCounter };

As you can see, this is our counter code but abstracted to pure JavaScript. I went with an objective approach to make things more readable.

However, this code on its own won't do much yet. We'll have to adjust our React and Vue components to work with this.

Luckily for us, both frameworks have their neat hook for managing Nano Stores.

// React nano store
npm i nanostores @nanostores/react

// Vue nano store
npm i nanostores @nanostores/vue

Now open up your React counter and adjust it to the following code.

import { useStore } from '@nanostores/react';
import { counter, increaseCounter, decreaseCounter } from '../store/counter';

export default function React() {
  const count = useStore(counter);
  const name = 'React';

  return (
    <div>
      <button onClick={decreaseCounter}>-</button>
      <pre>{count.value}</pre>
      <button onClick={increaseCounter}>+</button>
      <p>I'm a {name} component</p>
    </div>
  );
}

We abstracted all the functions to use our store replication. The critical part here is that we initialize the count as a useStore.

For the Vue component, we can do a similar thing like this:

<script>
import { useStore } from '@nanostores/vue';
import { counter, increaseCounter, decreaseCounter } from '../store/counter';
export default {
  data() {
    const count = useStore(counter);
    return {
      count,
      name: 'Vue',
      increaseCounter,
      decreaseCounter,
    };
  },
};
</script>

<template>
  <button @click="decreaseCounter">-</button>
  <pre>{{ count.value }}</pre>
  <button @click="increaseCounter">+</button>
  <p>I'm a {{ name }} component</p>
</template>

And that's it!

We now have a shared state between two completely different frameworks, powered by Nano Stores.

You can see the result demo in the video below.

You can find the complete code sample on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Computed Nano Stores

6 Sep, 2022 ยท 2 min read

Computed Nano Stores

Astro Nano Stores maps

5 Sep, 2022 ยท 3 min read

Astro Nano Stores maps

Join 1819 devs and subscribe to my newsletter