Svelte Stores State Management

Implement reactive state management for [Application] using Svelte stores.

Requirements

1. State Structure

Define stores for:

• [Store 1] - [Data type] (e.g., user profile)
• [Store 2] - [Data type] (e.g., app settings)
• [Store 3] - [Data type] (e.g., UI state)

2. Store Types to Implement

Writable Stores

For mutable state that components can update:

• Form data
• User preferences
• UI toggles
• Shopping cart

Readable Stores

For values controlled externally:

• Server time
• Geolocation
• WebSocket connections
• Animation frames

Derived Stores

For computed values based on other stores:

• Filtered lists
• Formatted data
• Aggregated values
• Combined state

Custom Stores

With specific business logic:

• Custom update methods
• Validation logic
• Side effects
• Auto-save functionality

3. Store Organization

Structure stores in:

src/stores/
  ├── [domain]Store.ts  (e.g., userStore.ts)
  ├── [domain]Store.ts  (e.g., cartStore.ts)
  └── index.ts          (exports)

4. Persistence

Implement if needed:

• LocalStorage sync
• SessionStorage backup
• IndexedDB for large data
• Auto-save on changes

5. TypeScript Integration

Ensure full type safety:

• Type all store values
• Type custom methods
• Type derived functions
• Export types for components

Implementation Pattern

import { writable, derived, readable } from 'svelte/store'
import type { Writable } from 'svelte/store'

// Writable store
export const [storeName]: Writable<[Type]> = writable([initialValue])

// Readable store
export const [storeName] = readable([initialValue], (set) => {
  // Setup logic
  const interval = setInterval(() => {
    set([newValue])
  }, [interval])
  
  // Cleanup
  return () => clearInterval(interval)
})

// Derived store
export const [derivedName] = derived(
  [sourceStore],
  ($[sourceStore]) => {
    return /* computed value */
  }
)

// Custom store with methods
function create[StoreName]() {
  const { subscribe, set, update } = writable<[Type]>([initial])
  
  return {
    subscribe,
    [method1]: () => update(state => /* logic */),
    [method2]: (value: [Type]) => set(value),
    reset: () => set([initial])
  }
}

export const [storeName] = create[StoreName]()

Usage in Components

<script lang="ts">
  import { [storeName] } from '$lib/stores'
  
  // Auto-subscribe with $
  $: console.log($[storeName])
  
  function updateStore() {
    [storeName].set([newValue])
    // or
    [storeName].update(current => /* new value */)
  }
</script>

<p>{$[storeName]}</p>

LocalStorage Persistence Pattern

const stored = localStorage.getItem('[key]')
const [storeName] = writable(stored ? JSON.parse(stored) : [defaultValue])

[storeName].subscribe(value => {
  localStorage.setItem('[key]', JSON.stringify(value))
})

Best Practices

• Keep stores focused and single-purpose
• Use derived stores for computed values
• Implement custom stores for complex logic
• Add TypeScript for type safety
• Clean up subscriptions in readable stores
• Use $ prefix for auto-subscription in components
• Avoid storing derived/computed state