Organize a large store by domain
A growing application has unrelated domains such as bears, fish, authentication, and UI state.
Zustand · Const
store composition
The slices pattern composes several focused Zustand state creators into one bounded store. It improves modularity while preserving a single store API.
How it works
Store composition divides a large Zustand store into smaller slice creators, then spreads those slices into one bounded store. Each slice receives the shared store arguments, so its actions can update the combined state and interact with other slices when needed.
Syntax
create((...a) => ({ ...createSliceA(...a), ...createSliceB(...a) }))Key points
- Split a large store into focused slice creators so related state and actions remain modular.
- Spread the slice results into a single bounded store created with Zustand's
createfunction. - Define a cross-slice action when one operation must update state owned by multiple slices.
- Additional slices use the same composition approach: import each creator and spread every result into the root store.
- The composed store supports middleware using the normal Zustand middleware pattern.
Common mistakes
- Apply middleware to the composed store rather than inside individual slices; slice-level middleware can cause unexpected behavior.
Example: Composing slices into one store
import { create } from 'zustand'
type BearSlice = {
bears: number
addBear: () => void
}
type FishSlice = {
fish: number
addFish: () => void
}
type Store = BearSlice & FishSlice
const createBearSlice = (set: (fn: (s: Store) => Partial<Store>) => void): BearSlice => ({
bears: 0,
addBear: () => set((state) => ({ bears: state.bears + 1 })),
})
const createFishSlice = (set: (fn: (s: Store) => Partial<Store>) => void): FishSlice => ({
fish: 0,
addFish: () => set((state) => ({ fish: state.fish + 1 })),
})
export const useBoundStore = create<Store>()((...a) => ({
...createBearSlice(a[0]),
...createFishSlice(a[0]),
}))Creates one Zustand store by spreading independently defined bear and fish slices.
When to use it
Implement cross-slice actions
A feature needs one operation that coordinates updates across multiple state areas.
Apply middleware at the store boundary
A team wants to add persistence or another middleware to a modular store.
Interview questions
QWhat problem does the slices pattern solve?
The slices pattern keeps related state and actions in separate creator functions, then combines their returned objects into one store. Consumers use the resulting bounded store as a single Zustand store.
Follow-up: How would a slice call an action from another slice? Use the shared store API, typically get(), inside the slice action to invoke the other slice's action.
QHow are multiple slices combined?
A combined store is created by spreading each slice creator's result into the object passed to create. The resulting store exposes all slice state and actions through one store API.
Follow-up: How can middleware be applied safely? Wrap the combined store creator, not the individual slice creators.
QCan one action update more than one slice?
Slices can define cross-slice actions because their creators receive the shared store arguments. An action can call get().addBear() and get().addFish() within one function.
Follow-up: What architectural rule should be followed for middleware? Apply middleware only at the combined-store level.
Related
Slices Patterncombinepersistcreatesetget