Zustandのデータ永続化

localStorageに値を保持することで、ブラウザが閉じられても値を永続的に保持することができます。

// themeStore.ts
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

type ThemeState = {
  theme: 'light' | 'dark'
  toggleTheme: () => void
}

export const useThemeStore = create(
  persist
<ThemeState>(
    (set) => ({
      theme: 'light',
      toggleTheme: () =>
        set((state) => ({
          theme: state.theme === 'light' ? 'dark' : 'light',
        })),
    }),
    {
      name: 'theme-storage', // localStorageのキー名
    }
  )
)

// ThemeToggle.tsx
import { useThemeStore } from './themeStore'

const ThemeToggle = () => {
  const theme = useThemeStore((state) => state.theme)
  const toggleTheme = useThemeStore((state) => state.toggleTheme)

  return (
    <button onClick={toggleTheme}>
      現在のテーマ: {theme}
    </button>
  )
}