Zustand 5

Prowler UI Layout

• Stores live in ui/store/{feature}/store.ts (some single files, e.g. ui/store/side-panel.ts) and are re-exported from ui/store/index.ts.
• Tests: ui/store/__tests__/*.test.ts or co-located store.test.ts.
• zustand/middleware (persist, createJSONStorage) is used; immer is NOT installed in ui/.

Basic Store

import { create } from "zustand";

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

// Usage - select what you need
function Counter() {
  const count = useCounterStore((s) => s.count);
  const increment = useCounterStore((s) => s.increment);
  const decrement = useCounterStore((s) => s.decrement);
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Persist Middleware