Zustand Slices & Modular State Architecture: Scaling a Collaborative Design Platform
## 1. Problem Statement
## **Case Study: DesignHub – Real-Time Collaborative Design**
DesignHub is a Figma-like platform where:
- Users can create, edit, and comment on design files in real time.
- Each feature (files, users, comments, notifications, preferences) is managed by a different team.
- State must be modular: easy to test, maintain, and scale as features grow.
- Performance is critical—only components using changed state should re-render.
- Teams want to use middleware (devtools, persistence, logging) on specific state slices.
**The challenge:**
How do you architect a global state system that is **modular, type-safe, and scalable**—so each feature team can own their slice, and the app remains fast and maintainable?
----------
## 2. Learning Objectives
By the end of this tutorial, you will:
- Understand what Zustand slices are and why they matter.
- Architect modular state using slices for different features.
- Combine slices into a single store with full type safety.
- Apply middleware to specific slices or the whole store.
- Test and maintain slices independently.
- Avoid pitfalls like tight coupling and unnecessary re-renders.
----------
## 3. Concept Introduction with Analogy
## **Analogy: The DesignHub Control Tower**
- **Slices** are like specialized teams in a control tower: one team manages flights, one manages weather, one manages communications.
- Each team (slice) has its own dashboard, rules, and logs—but they all work together in the same tower (store).
- If the weather team updates a forecast, only the weather dashboard changes—not the flight or comms dashboards.
----------
## 4. Technical Deep Dive
**A. What Are Zustand Slices?**
- A **slice** is a function that returns a piece of state and its actions, with its own types.
- Slices are composed together to create the full store.
- Each slice can have its own middleware, selectors, and tests.
**Why slices?**
- Modularity: Each feature owns its state logic.
- Scalability: Add or remove features without touching unrelated code.
- Testability: Test slices in isolation.
- Performance: Components subscribe only to the state they use.
----------
**B. Defining Slices: Example Types**
```js
// store/slices/userSlice.ts
export interface UserSlice {
user: { id: string; name: string } | null;
setUser: (user: { id: string; name: string }) => void;
clearUser: () => void;
}
export const createUserSlice = (set) => ({
user: null,
setUser: (user) => set({ user }),
clearUser: () => set({ user: null }),
});
```
```js
// store/slices/fileSlice.ts
export interface File {
id: string;
name: string;
content: string;
}
export interface FileSlice {
files: File[];
addFile: (file: File) => void;
updateFile: (id: string, content: string) => void;
}
export const createFileSlice = (set, get) => ({
files: [],
addFile: (file) => set((state) => ({ files: [...state.files, file] })),
updateFile: (id, content) =>
set((state) => ({
files: state.files.map((f) =>
f.id === id ? { ...f, content } : f
),
})),
});
```
**C. Combining Slices into a Single Store**
```js
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { createUserSlice, UserSlice } from './slices/userSlice';
import { createFileSlice, FileSlice } from './slices/fileSlice';
type DesignHubStore = UserSlice & FileSlice;
export const useDesignHubStore = create()(
devtools(
persist(
(set, get) => ({
...createUserSlice(set, get),
...createFileSlice(set, get),
// Add more slices here
}),
{ name: 'designhub-store' }
)
)
);
```
- **Order matters:** Middleware like `devtools` and `persist` can wrap the whole store or individual slices.
----------
**D. Using Slices in Components**
```js
import { useDesignHubStore } from './store';
function UserProfile() {
const user = useDesignHubStore((s) => s.user);
const setUser = useDesignHubStore((s) => s.setUser);
if (!user) return ;
return
);
}
```
**E. Testing and Maintaining Slices**
- Slices can be tested independently by calling their factory functions with mock `set` and `get`.
- Example (Jest)
```js
import { createUserSlice } from './userSlice';
test('setUser sets user', () => {
let state = { user: null };
const set = (fn) => { state = { ...state, ...fn(state) }; };
const slice = createUserSlice(set);
slice.setUser({ id: 'u2', name: 'Sam' });
expect(state.user.name).toBe('Sam');
});
```
## 5. Step-by-Step Data Modeling & Code Walkthrough
**A. Create Feature Slices**
```js
// store/slices/commentSlice.ts
export interface Comment {
id: string;
fileId: string;
author: string;
text: string;
}
export interface CommentSlice {
comments: Comment[];
addComment: (comment: Comment) => void;
getCommentsByFile: (fileId: string) => Comment[];
}
export const createCommentSlice = (set, get) => ({
comments: [],
addComment: (comment) => set((state) => ({ comments: [...state.comments, comment] })),
getCommentsByFile: (fileId) => get().comments.filter((c) => c.fileId === fileId),
});
```
**B. Combine All Slices in the Store**
```js
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { createUserSlice, UserSlice } from './slices/userSlice';
import { createFileSlice, FileSlice } from './slices/fileSlice';
import { createCommentSlice, CommentSlice } from './slices/commentSlice';
type DesignHubStore = UserSlice & FileSlice & CommentSlice;
export const useDesignHubStore = create()(
devtools(
persist(
(set, get) => ({
...createUserSlice(set, get),
...createFileSlice(set, get),
...createCommentSlice(set, get),
}),
{ name: 'designhub-store' }
)
)
);
```
**C. Using Slices in the App**
```js
function CommentsPanel({ fileId }) {
const comments = useDesignHubStore((s) => s.getCommentsByFile(fileId));
const addComment = useDesignHubStore((s) => s.addComment);
return (
{comments.map((c) => (
{c.author}: {c.text}
))}
);
}
```
## 6. Interactive Challenge / Mini-Project
**Your Turn!**
1. Create a `notificationsSlice`:
- Fields: `notifications: { id: string; message: string; read: boolean }[]`
- Actions: `addNotification`, `markAsRead`, `clearNotifications`
2. Add the slice to the main store.
3. Build a `NotificationsPanel` component that displays unread notifications and lets users mark them as read.
## 7. Common Pitfalls & Best Practices
## Common Pitfalls & Best Practices (Zustand Slices)
| Pitfall | Best Practice |
|-----------------------------------------|------------------------------------------------------------------|
| Mixing unrelated state in one slice | Keep slices focused on a single feature |
| Tight coupling between slices | Use actions/selectors, not direct state access |
| Not typing slices | Always define interfaces for each slice |
| Middleware order mistakes | Apply `devtools`/`persist` after combining slices |
| Not testing slices independently | Test each slice with mock `set`/`get` |
----------
## 8. Optional: Programmer’s Workflow Checklist
- Define an interface and factory for each slice.
- Combine slices in the main store with middleware.
- Use selectors to subscribe only to needed state.
- Test slices in isolation with mock set/get.
- Document slice boundaries and responsibilities.
**The challenge:**
How do you architect a global state system that is **modular, type-safe, and scalable**—so each feature team can own their slice, and the app remains fast and maintainable?
----------
## 2. Learning Objectives
By the end of this tutorial, you will:
- Understand what Zustand slices are and why they matter.
- Architect modular state using slices for different features.
- Combine slices into a single store with full type safety.
- Apply middleware to specific slices or the whole store.
- Test and maintain slices independently.
- Avoid pitfalls like tight coupling and unnecessary re-renders.
----------
## 3. Concept Introduction with Analogy
## **Analogy: The DesignHub Control Tower**
- **Slices** are like specialized teams in a control tower: one team manages flights, one manages weather, one manages communications.
- Each team (slice) has its own dashboard, rules, and logs—but they all work together in the same tower (store).
- If the weather team updates a forecast, only the weather dashboard changes—not the flight or comms dashboards.
----------
## 4. Technical Deep Dive
**A. What Are Zustand Slices?**
- A **slice** is a function that returns a piece of state and its actions, with its own types.
- Slices are composed together to create the full store.
- Each slice can have its own middleware, selectors, and tests.
**Why slices?**
- Modularity: Each feature owns its state logic.
- Scalability: Add or remove features without touching unrelated code.
- Testability: Test slices in isolation.
- Performance: Components subscribe only to the state they use.
----------
**B. Defining Slices: Example Types**
```js
// store/slices/userSlice.ts
export interface UserSlice {
user: { id: string; name: string } | null;
setUser: (user: { id: string; name: string }) => void;
clearUser: () => void;
}
export const createUserSlice = (set) => ({
user: null,
setUser: (user) => set({ user }),
clearUser: () => set({ user: null }),
});
```
```js
// store/slices/fileSlice.ts
export interface File {
id: string;
name: string;
content: string;
}
export interface FileSlice {
files: File[];
addFile: (file: File) => void;
updateFile: (id: string, content: string) => void;
}
export const createFileSlice = (set, get) => ({
files: [],
addFile: (file) => set((state) => ({ files: [...state.files, file] })),
updateFile: (id, content) =>
set((state) => ({
files: state.files.map((f) =>
f.id === id ? { ...f, content } : f
),
})),
});
```
**C. Combining Slices into a Single Store**
```js
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { createUserSlice, UserSlice } from './slices/userSlice';
import { createFileSlice, FileSlice } from './slices/fileSlice';
type DesignHubStore = UserSlice & FileSlice;
export const useDesignHubStore = create