Statenbeheer in Astro: een diepgaande duik in nanostores

Handleidingen

Welkom bij de eerste deel van de reeks “Nanostores in Astro: A Multi-Framework Adventure”. Als u zich bezig heeft gehouden met het beheer van de toestand in uw multi-framework Astro projecten, dan heeft u een verrassing in petto. Vandaag de dag bespreken we Nanostores, een lichtgewicht oplossing voor het beheer van de toestand die gemakkelijk integreert met de componenteneilandenarchitectuur van Astro.

In dit artikel zullen we ontdekken hoe Nanostores de toestandbeheer voor Astro, React, Vue en Svelte componenten kan vereenvoudigen. We zullen onafhankelijke toestand, gedeelde toestand behandelen en een persistentiemanagement introduceren. Laten we beginnen met deze reis om het toestandbeheer van onze Astro projecten te vereenvoudigen.

Als u direct aan het onderzoeken bent, dan is hier een korte samenvatting en enkele essentiële koppelingen:

Probeer de demo en het code samen met dit artikel uit voor een praktische leerervaring!

Nanostores is een minimalistische state management bibliotheek ontworpen met agnosticisme van frameworks in aandacht. Het biedt een eenvoudige API voor het maken en beheren van atomaire delen van de status, die gemakkelijk gedeeld en bijgewerkt kunnen worden over verschillende delen van uw toepassing.

  1. Lichtgewicht en snel: Nanostores is ongelooflijk klein (Tussen de 265 en 814 bytes), waarborgend dat het uw bundle grootte niet zal vergrootten.

  2. Framework-onafhankelijk: Perfect voor Astro’s multi-framework ecosystem. Het integreert gemakkelijk met React, Vue, Svelte, Solid en virtueel JavaScript.

  3. Eenvoudige API: Geen complexe setup of boilerplate. Het is eenvoudig en intuitief om te gebruiken.

  4. Aanvullend aan Astro’s Componenten Eilanden: Nanostores verbetert Astro’s eilanden architectuur, allowing efficient state management across isolated interactive components.

Nanostores draait om drie hoofdconcepten:

  1. Atomen: Eenvoudige stores die een enkele waarde bevatten.

  2. Maps: Stores die objecten bevatten met meerdere eigenschappen.

  3. Berekende Stores: Afgeleide stores die hun waarde berekend baseren op andere stores.

Bekijk nu een snel voorbeeld:

import { atom, map, computed } from 'nanostores'

// Atom
const count = atom(0)

// Map
const user = map({ name: 'Astro Fan', isLoggedIn: false })

// Computed Store
const greeting = computed([user], (user) => 
  user.isLoggedIn ? `Welcome back, ${user.name}!` : 'Hello, guest!'
)

In dit fragment hebben we een atoom voor een teller, een map voor gebruikersgegevens en een berekende store voor een dynamische ontgroeting gecreëerd. Simpel, niet waar?

Het beginnen met Nanostores in uw Astro-project is eenvoudig. Hier is hoe u het doet:

  1. Eerst installeer Nanostores en zijn framework-integraties:
# Using npm
npm install nanostores
npm install @nanostores/react  # For React
npm install @nanostores/vue    # For Vue

# Using yarn
yarn add nanostores
yarn add @nanostores/react     # For React
yarn add @nanostores/vue       # For Vue

# Using pnpm
pnpm add nanostores
pnpm add @nanostores/react     # For React
pnpm add @nanostores/vue       # For Vue

# Note: Svelte doesn't require a separate integration
  1. Maak een nieuw bestand voor uw stores, zeg src/stores/counterStore.js:
import { atom } from 'nanostores'

export const count = atom(0)

export function increment() {
  count.set(count.get() + 1)
}

export function decrement() {
  count.set(count.get() - 1)
}
  1. Nu kun je deze store in elke van uw componenten gebruiken. Hier is een snel voorbeeld in een Astro-component:
---
import { count, increment, decrement } from '../stores/counterStore'
---

<div>
  <button onclick={decrement}>-</button>
  <span>{count.get()}</span>
  <button onclick={increment}>+</button>
</div>

<script>
  import { count } from '../stores/counterStore'

  count.subscribe(value => {
    document.querySelector('span').textContent = value
  })
</script>

En daar hebben we het! U hebt net een Nanostore in uw Astro-project ingesteld.

In multi-framework Astro projecten zou u misschien willen dat de status onafhankelijk wordt beheerd binnen componenten van verschillende frameworks. Nanostores maakt dit eenvoudiger. Laat ons zien hoe we onafhankelijke statusbeheer kunnen implementeren over React, Vue, Svelte en Astro-componenten.

We zullen eenvoudige tellers in elk framework implementeren om onafhankelijk statusbeheer te demonstreren.

Eerst gelaten we onze onafhankelijke teller voorraad aanmaken:

// src/stores/independentCounterStore.js
import { atom } from 'nanostores'

export const reactCount = atom(0)
export const vueCount = atom(0)
export const svelteCount = atom(0)
export const astroCount = atom(0)

export function increment(store) {
  store.set(store.get() + 1)
}

export function decrement(store) {
  store.set(store.get() - 1)
}

Nu zullen we deze teller in elk framework implementeren:

// src/components/ReactCounter.jsx
import { useStore } from '@nanostores/react'
import { reactCount, increment, decrement } from '../stores/independentCounterStore'

export function ReactCounter() {
  const count = useStore(reactCount)

  return (
    <div>
      <button onClick={() => decrement(reactCount)}>-</button>
      <span>{count}</span>
      <button onClick={() => increment(reactCount)}>+</button>
    </div>
  )
}

<!-- src/components/VueCounter.vue -->
<template>
  <div>
    <button @click="decrement(vueCount)">-</button>
    <span>{{ count }}</span>
    <button @click="increment(vueCount)">+</button>
  </div>
</template>

<script setup>
import { useStore } from '@nanostores/vue'
import { vueCount, increment, decrement } from '../stores/independentCounterStore'

const count = useStore(vueCount)
</script>

<!-- src/components/SvelteCounter.svelte -->
<script>
import { svelteCount, increment, decrement } from '../stores/independentCounterStore'
</script>

<div>
  <button on:click={() => decrement(svelteCount)}>-</button>
  <span>{$svelteCount}</span>
  <button on:click={() => increment(svelteCount)}>+</button>
</div>

---
import { astroCount, increment, decrement } from '../stores/independentCounterStore'
---

<div>
  <button id="decrement">-</button>
  <span id="count">{astroCount.get()}</span>
  <button id="increment">+</button>
</div>

<script>
  import { astroCount, increment, decrement } from '../stores/independentCounterStore'

  document.getElementById('decrement').addEventListener('click', () => decrement(astroCount))
  document.getElementById('increment').addEventListener('click', () => increment(astroCount))

  astroCount.subscribe(value => {
    document.getElementById('count').textContent = value
  })
</script>

Als u ziet, behouden elke framework-component zijn eigen onafhankelijke tellerstatus met Nanostores. Deze aanpak laat toe aan afzonderlijk statusbeheer binnen elke component, ongeacht het gebruikte framework.

Nu zullen we zien hoe Nanostores deelde status mogelijk maakt over verschillende frameworkcomponenten. Dit is handig als u status moet synchroniseren tussen verschillende delen van uw toepassing.

We zullen een gedeelde teller maken die wordt bijgewerkt en getoond over React, Vue, Svelte en Astro-componenten.

Eerst laten we onze gedeelde teller voorraad aanmaken:

// src/stores/sharedCounterStore.js
import { atom } from 'nanostores'

export const sharedCount = atom(0)

export function increment() {
  sharedCount.set(sharedCount.get() + 1)
}

export function decrement() {
  sharedCount.set(sharedCount.get() - 1)
}

Nu zullen we componenten in elk framework implementeren die deze gedeelde status gebruiken:

// src/components/ReactSharedCounter.jsx
import { useStore } from '@nanostores/react'
import { sharedCount, increment, decrement } from '../stores/sharedCounterStore'

export function ReactSharedCounter() {
  const count = useStore(sharedCount)

  return (
    <div>
      <h2>React Shared Counter</h2>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

<!-- src/components/VueSharedCounter.vue -->
<template>
  <div>
    <h2>Vue Shared Counter</h2>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { useStore } from '@nanostores/vue'
import { sharedCount, increment, decrement } from '../stores/sharedCounterStore'

const count = useStore(sharedCount)
</script>

<!-- src/components/SvelteSharedCounter.svelte -->
<script>
import { sharedCount, increment, decrement } from '../stores/sharedCounterStore'
</script>

<div>
  <h2>Svelte Shared Counter</h2>
  <button on:click={decrement}>-</button>
  <span>{$sharedCount}</span>
  <button on:click={increment}>+</button>
</div>

---
import { sharedCount, increment, decrement } from '../stores/sharedCounterStore'
---

<div>
  <h2>Astro Shared Counter</h2>
  <button id="shared-decrement">-</button>
  <span id="shared-count">{sharedCount.get()}</span>
  <button id="shared-increment">+</button>
</div>

<script>
  import { sharedCount, increment, decrement } from '../stores/sharedCounterStore'

  document.getElementById('shared-decrement').addEventListener('click', decrement)
  document.getElementById('shared-increment').addEventListener('click', increment)

  sharedCount.subscribe(value => {
    document.getElementById('shared-count').textContent = value
  })
</script>

Met deze configuratie zal alle deze componenten dezelfde tellerstatus delen. Hoe dan ook de teller op een component wordt verhoogd of verlaagd, zal de waarde over alle componenten worden bijgewerkt, onafhankelijk van het framework dat wordt gebruikt.

Hoewel onafhankelijke en gedeelde staten krachtig zijn, soms hebben we onze status nodig om door pagina’s te worden opnieuw geladen of zelfs browser-sessies. Dat is waar @nanostores/persistent komen te staan. Laten we kijken hoe we persistentie van de status kunnen implementeren in ons Astro-project.

Eerst moeten we de persistente add-on voor Nanostores installeren:

# Using npm
npm install @nanostores/persistent

# Using yarn
yarn add @nanostores/persistent

# Using pnpm
pnpm add @nanostores/persistent

Nu gaan we een persistente teller maken die zijn waarde behoudt, zelfs als de pagina wordt ver refreshed:

// src/stores/persistentCounterStore.js
import { persistentAtom } from '@nanostores/persistent'

export const persistentCount = persistentAtom('persistentCount', 0)

export function increment() {
  persistentCount.set(persistentCount.get() + 1)
}

export function decrement() {
  persistentCount.set(persistentCount.get() - 1)
}

export function reset() {
  persistentCount.set(0)
}

In dit voorbeeld is ‘persistentCount’ de sleutel die wordt gebruikt om de waarde op localStorage op te slaan, en 0 is de beginwaarde.

Laten we nu een persistente teller implementeren met componenten uit verschillende frameworks. Deze teller zal zijn waarde behouden over pagina’s die opnieuw worden geladen en beschikbaar zijn vanuit elk framework.

// src/components/ReactPersistentIncrement.jsx
import { useStore } from '@nanostores/react'
import { persistentCount, increment } from '../stores/persistentCounterStore'

export function ReactPersistentIncrement() {
  const count = useStore(persistentCount)

  return (
    <button onClick={increment}>
      React Increment: {count}
    </button>
  )
}

<!-- src/components/VuePersistentDecrement.vue -->
<template>
  <button @click="decrement">
    Vue Decrement: {{ count }}
  </button>
</template>

<script setup>
import { useStore } from '@nanostores/vue'
import { persistentCount, decrement } from '../stores/persistentCounterStore'

const count = useStore(persistentCount)
</script>

<!-- src/components/SveltePersistentDisplay.svelte -->
<script>
import { persistentCount } from '../stores/persistentCounterStore'
</script>

<div>
  Svelte Display: {$persistentCount}
</div>

---
import { reset } from '../stores/persistentCounterStore'
---

<button id="reset-button">Astro Reset</button>

<script>
  import { persistentCount, reset } from '../stores/persistentCounterStore'

  document.getElementById('reset-button').addEventListener('click', reset)

  persistentCount.subscribe(value => {
    console.log('Persistent count updated:', value)
  })
</script>

Nu kun je deze componenten samen gebruiken in een Astro-pagina:

---
import ReactPersistentIncrement from '../components/ReactPersistentIncrement'
import VuePersistentDecrement from '../components/VuePersistentDecrement.vue'
import SveltePersistentDisplay from '../components/SveltePersistentDisplay.svelte'
---

<div>
  <h2>Persistent Counter Across Frameworks</h2>
  <ReactPersistentIncrement client:load />
  <VuePersistentDecrement client:load />
  <SveltePersistentDisplay client:load />
  <button id="reset-button">Astro Reset</button>
</div>

<script>
  import { persistentCount, reset } from '../stores/persistentCounterStore'

  document.getElementById('reset-button').addEventListener('click', reset)

  persistentCount.subscribe(value => {
    console.log('Persistent count updated:', value)
  })
</script>

Deze configuratie toont een persistente teller waar:

  • React de verhoging afhandelt

  • Vue de verlaging afhandelt

  • Svelte toont het huidige aantal

  • Astro biedt een resetknop

Het tellertje waarde zal blijven bestaan tussen pagina’s, dit toont de kracht van @nanostores/persistent in het behoud van de status.

Persistentie is bijzonder handig voor:

  1. Gebruikersopties (bijv. themainstellingen, taalkeuzen)

  2. Gedeeltelijk voltooide formulieren (om dataverlies te voorkomen bij een onbedoeld paginarefresh)

  3. Authenticatietokens (om sessies van gebruikers te behouden)

  4. Lokale cache van vaak aangevraagde data

door middel van @nanostores/persistent kun je de gebruikerservaring verrijken door belangrijke statusgegevens behouden te laten bestaan tussen pagina’s en browser sessies.

Bij het integreren van Nanostores in uw Astro-projecten, houdt u deze best practices en tips in aandacht om het beste uit deze lichtgewichtelijke statusbeheer oplossing te halen.

  • Gebruik atom voor eenvoudige, enkele-waardestaten.

  • Gebruik map voor object-achtige staten met meerdere eigenschappen.

  • Gebruik computed voor afgeleide staten die afhankelijk zijn van andere stores.

  • Gebruik persistentAtom of persistentMap wanneer u staten nodig heeft die over pagina’s herladen blijven bestaan.

In plaats van grote, monolithische stores te maken, is het beter om kleinere, meer gerichte stores te verkiezen. Deze aanpak verbeterd de onderhoudbaarheid en de prestaties door mogelijke granuliere updates toe te staan.

// Prefer this:
const userProfile = map({ name: '', email: '' })
const userPreferences = map({ theme: 'light', language: 'en' })

// Over this:
const user = map({ name: '', email: '', theme: 'light', language: 'en' })

Wanneer u staten heeft die afhankelijk zijn van andere delen van de staten, gebruik dan berekende stores. Dit helpt om uw staten DRY (Don’t Repeat Yourself) te houden en zorgt ervoor dat afgeleide staten altijd up-to-date zijn.

import { atom, computed } from 'nanostores'

const firstName = atom('John')
const lastName = atom('Doe')

const fullName = computed(
  [firstName, lastName],
  (first, last) => `${first} ${last}`
)

Nanostores heeft uitstekende ondersteuning voor TypeScript. Gebruik het om fouten vroeg te ontdekken en de ontwikkelaarshulpmiddelen te verbeteren.

import { atom } from 'nanostores'

interface User {
  id: number
  name: string
}

const currentUser = atom<User | null>(null)

Alhoewel Nanostores lichtgewicht is, denk eraan bij grotere toepassingen van de prestaties. Gebruik de batched functie om meerdere store-updates samen te groeperen, waardoor het aantal herrenderingen wordt beperkt.

import { atom, batched } from 'nanostores'

const count1 = atom(0)
const count2 = atom(0)

export const incrementBoth = batched(() => {
  count1.set(count1.get() + 1)
  count2.set(count2.get() + 1)
})

Wanneer je Nanostores gebruikt in een multi-framework Astro-project, probeer dan de kernstatuslogica framework-onafhankelijk te houden. Dit maakt het eenvoudiger om status te delen tussen verschillende frameworkcomponenten.

// stores/themeStore.js
import { atom } from 'nanostores'

export const theme = atom('light')

export function toggleTheme() {
  theme.set(theme.get() === 'light' ? 'dark' : 'light')
}

// React component
import { useStore } from '@nanostores/react'
import { theme, toggleTheme } from '../stores/themeStore'

function ThemeToggle() {
  const currentTheme = useStore(theme)
  return <button onClick={toggleTheme}>{currentTheme}</button>
}

Hoewel persistente stores krachtig zijn, gebruik ze doordacht. Niet alle status hoeft over sessies heen behouden te blijven. Overmatig gebruik van persistente stores kan leiden tot onverwacht gedrag en mogelijke prestatieproblemen.

Voor eenvoudiger debuggen kun je de onMount-functie gebruiken om statuswijzigingen te loggen:

import { atom, onMount } from 'nanostores'

const count = atom(0)

if (import.meta.env.DEV) {
  onMount(count, () => {
    count.listen((value) => {
      console.log('Count changed:', value)
    })
  })
}

Wanneer je Nanostores gebruikt in componenten die kunnen worden uitgeschakeld, zorg er dan voor dat je abonnementen opruimt om geheugenlekken te voorkomen.

import { useEffect } from 'react'
import { count } from '../stores/countStore'

function Counter() {
  useEffect(() => {
    const unsubscribe = count.subscribe(() => {
      // Do something
    })
    return unsubscribe
  }, [])

  // Rest of the component
}

Door deze best practices en tips te volgen, kun je effectief de status in je Astro-projecten beheren met Nanostores, ongeacht welke frameworks je integreert.

Zoals we in dit artikel hebben verkend, biedt Nanostores een krachtige maar lichte oplossing voor statusbeheer in Astro-projecten, vooral bij het werken met meerdere frameworks. Laten we de belangrijkste punten samenvatten:

  1. Veelzijdigheid: Nanostores integreert naadloos met Astro, React, Vue, Svelte en Solid, waardoor het een ideale keuze is voor multi-framework projecten.

  2. Eenvoud

    : Met zijn eenvoudige API biedt Nanostores een laag leeringsvermogen terwijl hij nog steeds sterke statemanagementcapabilities biedt.

  3. Verschillend: Van eenvoudige atomaire stores tot complexe berekende staten en zelfs persistentie, Nanostores past zich aan aan een breed scala aan statemanagementbehoeften.

  4. Prestaties: Door zijn lichtgewicht karakter zorgt Nanostores ervoor dat uw toepassing niet zal vergroot worden, het behoudend van de prestaties van Astro.

  5. Best Practices: Door de richtlijnen die we hebben besproken te volgen, zoals kleine en gerichte stores te houden, TypeScript te gebruiken en berekende stores voor afgeleide staten te gebruiken, kunt u efficient en onderhoudsgebruiksstatemanagement systemen maken.

Nanostores is een uitstekende keuze voor Astro’s componenteilandenarchitectuur, die u de mogelijkheid biedt om de status effectief te beheren over afgescheiden interactieve componenten. Of u nu een eenvoudige website bouwt met enkele interactieve elementen of een complexe webapplicatie met meerdere frameworks, biedt Nanostores de tools die u nodig heeft om de status effectief te behandelen.

Blijf doorgaan met uw reis met Astro en Nanostores, en onthoud dat de beste manier om te leren door te doen is. Experimenteer met verschillende soorten stores, probeer gegevensdelen tussen frameworks in te implementeren, en verken de mogelijkheden van persistentie. Elk project brengt nieuwe uitdagingen en kansen om uw vaardigheden in het beheer van de status te verfijnen.

Blijf op de hoogte van de volgende artikelen in ons “Nanostores in Astro: een avontuur met meerdere frameworks”-reeks, waarin we dieper zullen delven in praktische toepassingen en geavanceerde technieken voor statusbeheer in Astro-projecten.

Om uw kennis van Nanostores en zijn gebruik in Astro-projecten dieper te duiken, bekijk deze waardevolle bronnen:

Veel plezier met coderen, en moge je Astro-projecten altijd stateful en performant zijn!

Source:
https://meirjc.hashnode.dev/state-management-in-astro-a-deep-dive-into-nanostores