Управление состоянием в Astro: глубокое исследование Nanostores

Учебники

Добро пожаловать в первую часть серии статей “Nanostores in Astro: A Multi-Framework Adventure”. Если вы сталкивались с проблемами управления состоянием в ваших проектах Astro с использованием многочисленных фреймворков, то вам, скорее всего, понравится этот материал. Сегодня мы познакомимся с Nanostores — легким решением для управления состоянием, который гармонично integрируется с архитектурой компонентных островов Astro.

В этой статье мы более подробно рассмотрим, как Nanostores могут упростить управление состоянием между компонентами Astro, React, Vue и Svelte. Мы поговорим о независимом состоянии, shared state иintroduce persistent state management. Poised на этот путь, чтобы упростить управление состоянием в наших проектах Astro.

Если вы хотите сразу же перейти к делу, посмотрите краткое описание и необходимые ссылки:

Не стесняйтесь исследовать демо и код наряду с этим материалом, чтобы получить практический опыт!

Наномаркеты – это минималистическая библиотека управления состоянием, предназначенная для работы с любыми фреймворками. Она обеспечивает простатую API для создания и управления атомарными частями состояния, легкое и быстрое распространение и обновление которых можно осуществить в различных частях вашего приложения.

  1. 轻量级且快速: Nanostores очень маленькая ( между 265 и 814 байтами), что保证了 она не увеличит размер вашего пакета.

  2. 与框架无关:伊甸园 для ecosystems Astro多框架. Она гармонично интегрируется с React, Vue, Svelte, Solid и vanill JavaScript.

  3. 简单 API:无复杂设置或样板文件。它是直接和直观使用的。

  4. 与Astro的组件岛屿互补: Nanostores enhances Astro’s islands architecture, allowing efficient state management across isolated interactive components.

Наномаркет основан на трех основных концепциях:

  1. Атомы: Простые хранилища, которые содержат单个 значение.

  2. Карты: Хранилища, которые содержат объекты с множеством свойств.

  3. Вычисленные хранилища: Образуемые хранилища, которые вычисляют свое значение на основе других хранилищ.

Посмотрим на быстрый пример:

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!'
)

В этом отрывке мы создали атом для счетчика, карту для пользовательских данных и вычисленное хранение для динамического приветствия. Simple, правильно?

Начать работу с Наномаркетом в вашем проекте Astro довольно просто. Вот как это делается:

  1. Сначала установите Наномаркет и его сетки интеграций:
# 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. Создайте новый файл для ваших хранений, назовите его, скажем, 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. Теперь вы можете использовать этот магазин во всех ваших компонентах. Вот пример быстрого использования в компоненте Astro:
---
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>

Итак, это все! Вы только что настроили Наномаркет в вашем проекте Astro.

В проектах с многочисленными фреймворками Astro вы можете создавать независимый стандарт состояния в компонентах различных фреймворков. Nanostores обеспечивает гладкую работу с ним. Будем исследовать, как реализовать независимое управление состоянием между компонентами React, Vue, Svelte и Astro.

Мы реализуем простой счётчик в каждом из фреймворков для демонстрации независимого управления состоянием.

Сначала создадим независимую котировку счётчика:

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

Теперь реализуем этот счётчик в каждом из фреймворков:

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

Как вы можете видеть, каждый компонент фреймворка сохраняет собственное независимое состояние счётчика с помощью Nanostores. Этот подход позволяет управлять состоянием в каждом компоненте в изолированном режиме, независимо от используемого фреймворка.

Теперь мы исследуем, как Nanostores позволяет разделять состояние между компонентами различных фреймворков. Это особенно полезно, когда вам нужно синхронизировать состояние между различными частями вашего приложения.

Мы создадим общий счётчик, который может быть обновлён и отображен в компонентах React, Vue, Svelte и Astro.

Первым делом создадим нашу общую котировку счётчика:

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

Теперь реализуем компоненты в каждом из фреймворков с использованием этого общего состояния:

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

С такой настройкой все эти компоненты будут использовать одно и то же состояние счетчика. Увеличение или уменьшение счетчика в любом компоненте обновит значение во всех компонентах, независимо от используемого фреймворка.

Хотя независимые и общие состояния мощны, иногда нам нужно, чтобы наше состояние сохранялось между перезагрузками страницы или даже сессиями браузера. Здесь на помощь приходит @nanostores/persistent. Давайте рассмотрим, как реализовать постоянное состояние в нашем проекте Astro.

Сначала нам нужно установить дополнение persistent для Nanostores:

# Using npm
npm install @nanostores/persistent

# Using yarn
yarn add @nanostores/persistent

# Using pnpm
pnpm add @nanostores/persistent

Теперь давайте создадим постоянный счетчик, который будет сохранять свое значение даже при обновлении страницы:

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

В этом примере ‘persistentCount’ – это ключ, используемый для хранения значения в localStorage, а 0 – начальное значение.

Давайте реализуем постоянный счетчик с использованием компонентов из различных фреймворков. Этот счетчик будет сохранять свое значение при перезагрузках страницы и будет доступен из любого фреймворка.

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

Теперь вы можете использовать эти компоненты вместе на странице Astro:

---
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>

Эта настройка демонстрирует постоянный счетчик, где:

  • React отвечает за увеличение

  • Vue отвечает за уменьшение

  • Свелте показывает текущий счет

  • Астро обеспечивает кнопку сброса

Значение счетчика сохраняется между перезагрузками страниц, демонстрируя мощь @nanostores/persistent в поддержании состояния.

Сохраненное состояние особенно полезно для:

  1. Параметры пользователя (например, настройки темы, выбор языка)

  2. Частично заполненных форм (чтобы предотвратить потерю данных при случайной перезагрузке страницы)

  3. Токены аутентификации (для поддержания сессий пользователей)

  4. Локального кеша часто используемых данных

При использовании @nanostores/persistent вы можете улучшить пользовательский опыт, поддерживая важные данные состояния между перезагрузками страниц и сеансами браузера.

При интеграции Nanostores в ваши проекты Astro учитывайте эти советы и лучшие практики, чтобы лучше использовать этот легкий систему управления состоянием.

  • Используйте atom для простых, однозначных состояний.

  • Используйте map для объектно-подобных состояний с множеством свойств.

  • Используйте computed для определенных состояний, зависящих от других модулей.

  • Используйте persistentAtom или persistentMap, если нужно, чтобы состояние сохранялось после перезагрузки страницы.

Вместо создания больших, монолитных магазинов, предпочитайте малые, сфокусированные магазины. Этот подход улучшает maintainability и performance, позволяя более granular updates.

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

когда у вас есть состояния, зависящие от других частей состояний, используйте computer stores. Это помогает maintaiDRY (Don’t Repeat Yourself) и ensures derived state is always up-to-date.

import { atom, computed } from 'nanostores'

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

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

Nanostores has excellent TypeScript support. Use it to catch errors early and improve the developer experience.

import { atom } from 'nanostores'

interface User {
  id: number
  name: string
}

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

While Nanostores is lightweight, be mindful of performance in larger applications. Use the batched function to group multiple store updates together, reducing the number of re-renders.

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

При использовании Nanostores в многофреймворковом проекте Astro старайтесь держать основную логику состояния независимой от фреймворка. Это облегчит совместное использование состояния между различными компонентами фреймворков.

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

Хотя постоянные хранилища мощные, используйте их обдуманно. Не все состояния нужно сохранять между сеансами. Чрезмерное использование постоянных хранилищ может привести к неожиданному поведению и потенциальным проблемам с производительностью.

Для облегчения отладки, вы можете использовать функцию onMount для логирования изменений состояния:

import { atom, onMount } from 'nanostores'

const count = atom(0)

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

При использовании Nanostores в компонентах, которые могут быть размонтированы, убедитесь, что вы очищаете подписки, чтобы предотвратить утечки памяти.

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

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

  // Rest of the component
}

Следуя этим лучшим практикам и советам, вы сможете эффективно управлять состоянием в ваших проектах Astro с использованием Nanostores, независимо от того, какие фреймворки вы интегрируете.

Как мы рассмотрели в этой статье, Nanostores предоставляет мощное, но легковесное решение для управления состоянием в проектах Astro, особенно при работе с несколькими фреймворками. Давайте подведем итоги:

  1. Универсальность: Nanostores бесшовно интегрируется с Astro, React, Vue, Svelte и Solid, что делает его идеальным выбором для многофреймворковых проектов.

  2. Простота

    : Благодаря простому API, Nanostores обеспечивает низкий уровень сложности обучения, несмотря на то, что он still provides robust state management capabilities.

  3. Флексиbilitty: от простых атоматических магазинов до сложных вычисленных состояний и даже постоянного хранения, Nanostores адаптируется для широкого диапазона потребностей управления состоянием.

  4. Показатель производительности: Его лёгкая натура обеспечивает, что Nanostores не увеличит ваше приложение, сохраняя выгоды от производительности Astro.

  5. Лучшие практики: Следуя советам, которые мы обсуждали, таким как сохранение магазинов небольшими и сфокусированными, использование TypeScript и использование вычисленных магазинов для определенного состояния, вы можете создавать maintainable и эффективные системы управления состоянием.

Микромаркеты Nanostores ярко продемонстрировали свои способности в архитектуре компонентных островов Astro, позволяя эффективно управлять состоянием в изолированных интерактивных компонентах. Независимо от того, разрабатываете ли вы простой сайт с несколькими интерактивными элементами или сложную веб-приложение с несколькими фреймворками, Nanostores предоставляет инструменты, необходимые для эффективного управления состоянием.

Продолжая вашу поездку с Astro и Nanostores, помните, что лучший способ leaneding – это делая. Экспериimentйте с различными типами магазинов, попробуйте реализовать shared state across frameworks, и исследователенье возможностей persistent storage. Каждое проекты принесет новые вызования и возможности для усовершенствования ваших навыков управления состоянием.

Оставайтесь с нами для следующих статей в нашем цикле “Nanostores in Astro: A Multi-Framework Adventure”, где мы более глубоко ознакомимся с практическими приложениями и avanced techniques для управления состоянием в проектах Astro.

Чтобы глубже ознакомиться с Nanostores и его использованием в проектах Astro, проверьте эти ценные ресурсы:

Счастливого кодирования, и могут ваши проекты Astro быть и всегда состоятельными и высокоrendundтными!

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