/** * Example usage of State Versioning * FE-STATE-011: Example integration with Zustand persist middleware * * This file demonstrates how to use state versioning with Zustand stores. */ import { create } from 'zustand'; import { persist } from 'zustand/middleware'; import { createVersionedStorage, createMigration, type Migration } from './stateVersioning'; // Example state interfaces for different versions interface LibraryStateV1 { items: Array<{ id: string; title: string }>; favorites: string[]; // Array of IDs } interface LibraryStateV2 { items: Array<{ id: string; title: string }>; favorites: { byId: Record; allIds: string[]; }; } interface LibraryStateV3 { items: { byId: Record; allIds: string[]; }; favorites: { byId: Record; allIds: string[]; }; } // Define migrations const migrations: Migration[] = [ createMigration( 2, (state) => { // Migrate from V1 to V2: Convert favorites array to normalized structure const v1 = state as LibraryStateV1; const favoritesById: Record = {}; const favoritesAllIds: string[] = []; for (const itemId of v1.favorites) { const item = v1.items.find((i) => i.id === itemId); if (item) { favoritesById[itemId] = item; favoritesAllIds.push(itemId); } } return { items: v1.items, favorites: { byId: favoritesById, allIds: favoritesAllIds, }, }; }, 'Convert favorites array to normalized structure', ), createMigration( 3, (state) => { // Migrate from V2 to V3: Normalize items as well const v2 = state as LibraryStateV2; const itemsById: Record = {}; const itemsAllIds: string[] = []; for (const item of v2.items) { itemsById[item.id] = item; itemsAllIds.push(item.id); } return { items: { byId: itemsById, allIds: itemsAllIds, }, favorites: v2.favorites, }; }, 'Normalize items structure', ), ]; // Example store with versioning export const useVersionedLibraryStore = create()( persist( (set) => ({ items: { byId: {}, allIds: [], }, favorites: { byId: {}, allIds: [], }, }), { name: 'library-storage', storage: createVersionedStorage({ currentVersion: 3, storeName: 'LibraryStore', migrations, createInitialState: () => ({ items: { byId: {}, allIds: [], }, favorites: { byId: {}, allIds: [], }, }), }), }, ), );