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.
ts
// 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.
tsx
// 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.
ts
// 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" }
)
);