zustand-store-development

name	zustand-store-development
description	Guide for creating and modifying Zustand stores with IndexedDB persistence in the DEVS platform. Use this when asked to create a new store, modify store logic, or work with state management.

Zustand Store Development for DEVS

When creating or modifying Zustand stores in the DEVS platform, follow these patterns and best practices.

Directory Structure

Stores are located in src/stores/. Each store manages a specific domain entity.

Store Pattern Template

import { create } from 'zustand'
import { db } from '@/lib/db'
import { toast } from '@/lib/toast'

// 1. Define the store state interface
interface EntityState {
  entities: Entity[]
  isLoading: boolean
  error: string | null
}

// 2. Define the store actions interface
interface EntityActions {
  loadEntities: () => Promise<void>
  createEntity:  <>
  :  <>
  :  <>
  :   | 
}


  useEntityStore = create< & >(
   ({
    
    : [],
    : ,
    : ,

    
    :  () => {
      ({ : , :  })
       {
         entities =  db..()
        ({ entities, :  })
      }  (error) {
        ({ : (error  )., :  })
        toast.()
      }
    },

    :  (data) => {
       :  = {
        : crypto.(),
        ...data,
        :  (),
        :  (),
      }

       db..(entity)
      ( ({ : [...state., entity] }))
       entity
    },

    :  (id, updates) => {
       updatedData = { ...updates, :  () }
       db..(id, updatedData)
      ( ({
        : state..(
          e. === id ? { ...e, ...updatedData } : e,
        ),
      }))
    },

    :  (id) => {
       db..(id)
      ( ({
        : state..( e. !== id),
      }))
    },

    :  {
       ()..( e. === id)
    },
  }),
)


   = () =>
  useEntityStore.().(id)
   = () =>
  useEntityStore.().(data)
   = () =>
  useEntityStore.().(id, updates)
   = () =>
  useEntityStore.().(id)