zustand-store-patterns

Files (1)

• SKILL.md

SKILL.md (first lines)

# Zustand Store Patterns

## When to Use

- Adding a new feature that needs client state
- Understanding the standard store fields
- Debugging store updates that don't trigger re-renders
- Adding provider/model selector state

## Common Store Shape

Every feature store follows this interface pattern:

```typescript
interface FeatureState {
  // Chat state
  provider: string;
  model: string;
  input: string;
  sending: boolean;
  sessionmessage: any[];
  pendingImages: any[];

  // Loading & pagination
  loadingfetch: boolean;
  loadingerror: boolean;
  nextCursor: string | null;
  hasMore: boolean;

  // Image lightbox
  lightboxOpen: boolean;
  lightboxImage: string | null;

  // UI state
  copiedIndex: number | null;
  pendingApproval: ToolApproval | null;

  // Refs (stored in state for React compat)
  pendingApprovalRef: React.MutableRefObject<any>;
  threadIdRef: React.MutableRefObject<string>;
  topSentinelRef: React.MutableRefObject<HTMLDivElement | null>;
  scrollContainerRef: React.MutableRefObject<HTMLDivElement | null>;
  abortControllerRef: React.MutableRefObject<AbortController | null>;

  // Setters
  setProvider: (provider: string) => void;
  setModel: (model: string) => void;
  setInput: (input: string) => void;
  setSending: (sending: boolean) => void;
  updateSessionMessages: (updater: (prev: any[]) => any[]) => void;
  resetSending: () => void;
  scrollToBottom: () => void;
}
```

## Store Template

```typescript
import { create } from "zustand";

interface FeatureStore {
  // === State ===
  provider: string;
  model: string;
  input: string;
  sending: boolean;
  sessionmessage: any[];
  loadingfetch: boolean;
  loadingerror: boolean;

  // === Setters ===
  setProvider: (provider: string) => void;
  setModel: (model: string) => void;
  setInput: (input: string) => void;
  setSending: (sending: boolean) => void;
  updateSessionMessages: (updater: (prev: any[]) => any[]) => void;
}

export const featurestore = create<FeatureStore>((set) => ({
  // Initial state
  provider: "",
  model: "",
  input: "",
  sending: false,
  sessionmessage: [],
  loadingfetch: false,
  loadingerror: false,

  // Setters
  setProvider: (provider) => set({ provider, model: "" }), // Reset model on provider change
  setModel: (model) => set({ model }),
  setInput: (input) => set({ input }),
  setSending: (sending) => set({ sending }),
  updateSessionMessages: (updater) =>
    set((state) => ({ sessionmessage: updater(state.sessionmessage) })),
}));
```

## Critical Patterns

### 1. `setProvider` Resets the Model

```typescript
setProvider: (provider) => set({ provider, model: "" });
```

When the user switches providers, the selected model **must** reset to empty. This prevents sending a request with a model that doesn't exist on the new provider.

### 2. `updateSessionMessages` Pattern

Never mutate `sessionmessage` directly:

```typescript
// ✅ Correct
store.updateSessionMessages((prev) => [...prev, newMessage]);

// ❌ Wrong — won't trigger re-render
store.sessionmessage.push(newMessage);
```

From NarihitoM/MultimateAi, MIT.

More from NarihitoM/MultimateAi