TypeScript con Zustand

import { create } from "zustand";
 
// Define state y acciones en una sola interfaz
interface BearStore {
  bears: number;
  hungry: boolean;
  addBear: () => void;
  removeBear: () => void;
  setHungry: (hungry: boolean) => void;
}
 
// Pasa la interfaz como genérico
const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  hungry: false,
  addBear: () => set((s) => ({ bears: s.bears + 1 })),
  removeBear: () => set((s) => ({ bears: Math.max(0, s.bears - 1) })),
  setHungry: (hungry) => set({ hungry }),
}));

// types/store-types.ts
export interface User {
  id: string;
  name: string;
  email: string;
  role: "admin" | "editor" | "viewer";
}
 
export interface Project {
  id: string;
  name: string;
  ownerId: string;
  status: "active" | "archived" | "draft";
}
 
// Separa state y acciones para mayor claridad
export interface WorkspaceState {
  currentUser: User | null;
  projects: Project[];
  activeProjectId: string | null;
  isLoading: boolean;
  error: string | null;
}
 
export interface WorkspaceActions {
  setUser: (user: User | null) => void;
  fetchProjects: () => Promise<void>;
  setActiveProject: (id: string | null) => void;
  createProject: (input: Pick<Project, "name">) => Promise<Project>;
  archiveProject: (id: string) => Promise<void>;
}
 
export type WorkspaceStore = WorkspaceState & WorkspaceActions;

// stores/workspace-store.ts
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import type { WorkspaceStore, WorkspaceState, Project } from "@/types/store-types";
 
const initialState: WorkspaceState = {
  currentUser: null,
  projects: [],
  activeProjectId: null,
  isLoading: false,
  error: null,
};
 
export const useWorkspaceStore = create<WorkspaceStore>()(
  devtools(
    persist(
      (set, get) => ({
        ...initialState,
 
        setUser: (user) => set({ currentUser: user }),
 
        fetchProjects: async () => {
          set({ isLoading: true, error: null });
          try {
            const res = await fetch("/api/projects");
            if (!res.ok) throw new Error("Error al obtener");
            const projects: Project[] = await res.json();
            set({ projects, isLoading: false });
          } catch (err) {
            set({ error: (err as Error).message, isLoading: false });
          }
        },
 
        setActiveProject: (id) => set({ activeProjectId: id }),
 
        createProject: async (input) => {
          set({ isLoading: true, error: null });
          try {
            const user = get().currentUser;
            if (!user) throw new Error("No autenticado");
 
            const res = await fetch("/api/projects", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ ...input, ownerId: user.id }),
            });
            const project: Project = await res.json();
            set((s) => ({
              projects: [...s.projects, project],
              isLoading: false,
            }));
            return project;
          } catch (err) {
            set({ error: (err as Error).message, isLoading: false });
            throw err;
          }
        },
 
        archiveProject: async (id) => {
          await fetch(`/api/projects/${id}`, {
            method: "PATCH",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ status: "archived" }),
          });
          set((s) => ({
            projects: s.projects.map((p) =>
              p.id === id ? { ...p, status: "archived" as const } : p
            ),
          }));
        },
      }),
      {
        name: "workspace",
        partialize: (state): Pick<WorkspaceState, "activeProjectId"> => ({
          activeProjectId: state.activeProjectId,
        }),
      }
    ),
    { name: "WorkspaceStore" }
  )
);

// hooks/use-workspace.ts — hooks de selector tipados
import { useWorkspaceStore } from "@/stores/workspace-store";
import type { Project } from "@/types/store-types";
 
export function useActiveProject(): Project | undefined {
  return useWorkspaceStore((s) =>
    s.projects.find((p) => p.id === s.activeProjectId)
  );
}
 
export function useProjectsByStatus(status: Project["status"]): Project[] {
  return useWorkspaceStore((s) => s.projects.filter((p) => p.status === status));
}
 
export function useIsProjectOwner(projectId: string): boolean {
  return useWorkspaceStore(
    (s) => s.projects.find((p) => p.id === projectId)?.ownerId === s.currentUser?.id
  );
}

// Infiere tipos a partir de un store existente
type State = ReturnType<typeof useWorkspaceStore.getState>;
type ActiveProject = ReturnType<typeof useActiveProject>;

import { StateCreator } from "zustand";
 
interface AuthSlice {
  token: string | null;
  login: (credentials: { email: string; password: string }) => Promise<void>;
}
 
interface DataSlice {
  items: string[];
  fetchItems: () => Promise<void>;
}
 
type FullStore = AuthSlice & DataSlice;
 
const createAuthSlice: StateCreator<FullStore, [], [], AuthSlice> = (set) => ({
  token: null,
  login: async (credentials) => {
    const { token } = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify(credentials),
    }).then((r) => r.json());
    set({ token });
  },
});

import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
 
// TypeScript infiere el tipo correcto a través de todas las capas de middleware
const useStore = create<MyState>()(
  devtools(
    persist(
      immer((set) => ({
        // set acepta mutaciones Draft<MyState> aquí
      })),
      { name: "store" }
    ),
    { name: "DevTools" }
  )
);

// Tipado explícito para stores complejos
import { StoreApi, UseBoundStore } from "zustand";
 
type MyStore = UseBoundStore<StoreApi<MyState>>;
const useStore: MyStore = create<MyState>()((set) => ({ ... }));