State Management

Zap.ts uses Zustand for state management, providing a simple, scalable, and type-safe way to manage application state across your app.

Overview

• Composable: Stores can be split by feature and composed as needed.
• Lightweight: Zustand is a minimal state management library with a small bundle size.
• No boilerplate: Create and use stores with minimal code.
• Persistent: Easily persist state to localStorage or sessionStorage.
• Type-safe: All stores are fully typed with TypeScript.

How it works?

1. Creating a store

Stores are defined in the src/zap/stores/ directory. You can create a new store using Zustand's create function.

// src/stores/user.store.ts
import { create } from "zustand";

type UserState = {
  user: { id: string; name: string } | null;
  setUser: (user: { id: string; name: string } | null) => void;
};

export const useUserStore = create<UserState>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

2. Using a store in components

Access and update state in your React components using the custom hook exported by your store.

// Example usage in a component
import { useUserStore } from "@/stores/user.store";

export default function Profile() {
  const { user, setUser } = useUserStore();

  // ...
}

3. Persisting state

Zap.ts uses Zustand's persist middleware to persist state to localStorage or sessionStorage when needed.

// src/stores/theme.store.ts
import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useThemeStore = create(
  persist(
    (set) => ({
      theme: "light",
      setTheme: (theme: string) => set({ theme }),
    }),
    { name: "theme-store" }
  )
);