Replacing Redux with Zustand: A Reduction in Boilerplate

The State Management Bloat

Redux is legendary, but extremely heavy. Actions, reducers, dispatchers, payload types—when building a mid-sized dashboard, the amount of plumbing necessary just to toggle a modal is actively damaging to developer velocity.

Entering Zustand

Zustand essentially wraps React's context and hooks into an unopinionated, incredibly small footprint.

import { create } from 'zustand'

interface DroneState {
  drones: number
  addDrone: () => void
  wipeSystem: () => void
}

const useDroneStore = create<DroneState>()((set) => ({
  drones: 0,
  addDrone: () => set((state) => ({ drones: state.drones + 1 })),
  wipeSystem: () => set({ drones: 0 }),
}))

There are no providers. There is no wrapping the app. It supports asynchronous requests natively. By ripping out Redux on a legacy project and replacing it with specialized Zustand stores, we deleted over 4,000 lines of boilerplate TS code.