Skip to content
Home / Migrations / Redux Toolkit → Zustand

Redux Toolkit → Zustand

easy

Zustand is simpler, lighter (1KB), no boilerplate. No providers, no action creators, no reducers. Just a hook.

Estimated: 2-4h · 5 steps
Progress0%
Step 1: Install Zustand
npm install zustand && npm uninstall @reduxjs/toolkit react-redux
Step 2: Convert slices to stores

Redux slices → Zustand stores. Each slice becomes a create() store with state and actions in one object.

import { create } from 'zustand'
const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }))
Step 3: Remove Provider

Delete <Provider store={store}> wrapper. Zustand stores are consumed directly via hooks.

Step 4: Replace useSelector/useDispatch

const count = useSelector(s => s.counter.count) → const count = useStore(s => s.count). No dispatch needed — call actions directly.

Step 5: Add middleware if needed

persist() for localStorage, devtools() for Redux DevTools. Zustand supports both.

✓ All state reads/writes work, DevTools connected