The Slices Pattern

Decompose a massive store into clean, domain-driven slice functions.

State Management5 min readConcept 7 of 22

What is the Slices Pattern?

In Zustand, the easiest way to organize state is simply to create multiple stores (e.g., useUserStore and useCartStore). However, if your state domains need to interact frequently, you might want a single combined store.

The 'Slices Pattern' is Zustand's way of splitting a single, monolithic store into multiple smaller, domain-specific functions called 'slices'. You then merge these slices together when calling create().

Why use slices?

If you cram authentication, user preferences, shopping cart data, and UI state into one massive create() call, your store file becomes thousands of lines long and impossible to read.

Slices let you move the cart logic to cartSlice.ts and the auth logic to authSlice.ts, keeping your codebase modular while still sharing a single global store.

How to implement a slice

A slice is just a function that takes the store's set and get functions and returns an object containing that domain's state and actions.

tsx export const createBearSlice = (set) => ({ bears: 0, addBear: () => set((state) => ({ bears: state.bears + 1 })), });

Then, in your main store file, you merge the slices by spreading them into the create callback, passing the arguments (set, get, store) through:

tsx export const useBoundStore = create((...a) => ({ ...createBearSlice(...a), ...createFishSlice(...a), }));

Slice Architecture

Observe how domain-specific logic is isolated into independent slice functions, which are then combined to form the bound store hook.

// 1. Bear Slice (e.g., bearSlice.ts) const createBearSlice = (set) => ({ bears: 0, addBear: () => set(...) }) // 2. Fish Slice (e.g., fishSlice.ts) const createFishSlice = (set) => ({ fishes: 0, addFish: () => set(...) }) // 3. Bound Store (store.ts) export const useBoundStore = create((...a) => ({ ...createBearSlice(...a), ...createFishSlice(...a), }))

Bear Slice

bears: 0addBear()

Fish Slice

fishes: 0addFish()
create(...)

Bound Store

bearsfishesaddBear()addFish()

Domain logic is written in isolated functions (slices) which are then spread into a single, unified store instance.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How do you combine multiple slices into a single Zustand store?

Remember this

  • The Slices pattern splits a large store into smaller, domain-driven functions.
  • Slices are merged together by spreading them inside the create callback.
  • If state domains don't need to interact, creating separate stores is simpler.
  • Use StateCreator in TypeScript to properly type your slice functions.

Done with this concept?

Mark it complete to track your progress. No login needed.