Zustand llegó para destronar a Redux

¿Todavía sigues usando Redux? Déjame contarte que existe una alternativa más simple, más elegante y con mucho menos boilerplate: Zustand.

En este post te muestro por qué Zustand se ha convertido en mi manejador de estado favorito para React.

El problema con Redux

Redux es poderoso, pero seamos honestos:

Mucho boilerplate: Actions, reducers, action creators, selectors...
Curva de aprendizaje: Middleware, thunks, sagas, slices...
Archivos por todos lados: Un cambio simple requiere tocar múltiples archivos
Configuración inicial: Configurar el store toma más tiempo del necesario

Para aplicaciones enterprise enormes, Redux tiene su lugar. Pero para el 90% de los proyectos, es overkill.

Entra Zustand 🐻

Zustand (alemán para "estado") es un manejador de estado minimalista creado por los mismos autores de Jotai y React Spring. Su filosofía es simple: hacer state management sin complicaciones.

Instalación

bash

npm install zustand

Tu primer store en 10 líneas

typescript

import { create } from 'zustand'interface CounterStore {  count: number  increment: () => void  decrement: () => void}const useCounterStore = create<CounterStore>((set) => ({  count: 0,  increment: () => set((state) => ({ count: state.count + 1 })),  decrement: () => set((state) => ({ count: state.count - 1 })),}))

Y ya. Eso es todo. 😎

🎬 ¿Prefieres aprender en video? Tenemos más tutoriales de React y state management en nuestro canal de YouTube.

Usándolo en un componente

tsx

function Counter() {  const { count, increment, decrement } = useCounterStore()  return (    <div>      <p>Contador: {count}</p>      <button onClick={increment}>+</button>      <button onClick={decrement}>-</button>    </div>  )}

No hay Provider, no hay connect, no hay mapStateToProps. Solo un hook.

Comparación: Redux vs Zustand

Veamos el mismo ejemplo de un carrito de compras en ambos:

Con Redux (versión moderna con toolkit)

typescript

// store/cartSlice.tsimport { createSlice, PayloadAction } from '@reduxjs/toolkit'interface CartItem {  id: string  name: string  price: number  quantity: number}interface CartState {  items: CartItem[]}const initialState: CartState = {  items: [],}export const cartSlice = createSlice({  name: 'cart',  initialState,  reducers: {    addItem: (state, action: PayloadAction<CartItem>) => {      const existing = state.items.find(item => item.id === action.payload.id)      if (existing) {        existing.quantity += 1      } else {        state.items.push({ ...action.payload, quantity: 1 })      }    },    removeItem: (state, action: PayloadAction<string>) => {      state.items = state.items.filter(item => item.id !== action.payload)    },  },})export const { addItem, removeItem } = cartSlice.actionsexport default cartSlice.reducer

typescript

// store/index.tsimport { configureStore } from '@reduxjs/toolkit'import cartReducer from './cartSlice'export const store = configureStore({  reducer: {    cart: cartReducer,  },})export type RootState = ReturnType<typeof store.getState>export type AppDispatch = typeof store.dispatch

tsx

// App.tsximport { Provider } from 'react-redux'import { store } from './store'function App() {  return (    <Provider store={store}>      <Cart />    </Provider>  )}

tsx

// Cart.tsximport { useSelector, useDispatch } from 'react-redux'import { RootState } from './store'import { addItem, removeItem } from './store/cartSlice'function Cart() {  const items = useSelector((state: RootState) => state.cart.items)  const dispatch = useDispatch()  return (    <div>      {items.map(item => (        <div key={item.id}>          {item.name} x {item.quantity}          <button onClick={() => dispatch(removeItem(item.id))}>            Eliminar          </button>        </div>      ))}    </div>  )}

Con Zustand

typescript

// store/cartStore.tsimport { create } from 'zustand'interface CartItem {  id: string  name: string  price: number  quantity: number}interface CartStore {  items: CartItem[]  addItem: (item: CartItem) => void  removeItem: (id: string) => void}export const useCartStore = create<CartStore>((set) => ({  items: [],  addItem: (item) => set((state) => {    const existing = state.items.find(i => i.id === item.id)    if (existing) {      return {        items: state.items.map(i =>          i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i        )      }    }    return { items: [...state.items, { ...item, quantity: 1 }] }  }),  removeItem: (id) => set((state) => ({    items: state.items.filter(item => item.id !== id)  })),}))

tsx

// Cart.tsximport { useCartStore } from './store/cartStore'function Cart() {  const { items, removeItem } = useCartStore()  return (    <div>      {items.map(item => (        <div key={item.id}>          {item.name} x {item.quantity}          <button onClick={() => removeItem(item.id)}>            Eliminar          </button>        </div>      ))}    </div>  )}

¿Ves la diferencia? Un archivo vs cuatro. Sin Provider. Sin dispatch. Sin selectors.

Features avanzadas

Persistencia con localStorage

typescript

import { create } from 'zustand'import { persist } from 'zustand/middleware'const useStore = create(  persist(    (set) => ({      user: null,      setUser: (user) => set({ user }),    }),    {      name: 'user-storage', // key en localStorage    }  ))

Acciones asíncronas

typescript

const useUserStore = create((set) => ({  user: null,  loading: false,  fetchUser: async (id: string) => {    set({ loading: true })    const user = await fetch(`/api/users/${id}`).then(r => r.json())    set({ user, loading: false })  },}))

Sin thunks, sin sagas, sin middleware especial. Solo async/await normal.

Selectors para optimizar renders

typescript

// Solo re-renderiza cuando cambia 'count'const count = useStore((state) => state.count)// Seleccionar múltiples valoresconst { count, increment } = useStore((state) => ({  count: state.count,  increment: state.increment,}))

¿Cuándo usar Redux?

Redux todavía tiene sentido en:

Equipos muy grandes donde la estructura rígida ayuda
Aplicaciones que necesitan time-travel debugging extensivo
Proyectos legacy que ya lo usan
Cuando necesitas el ecosistema completo de middleware

¿Cuándo usar Zustand?

Para todo lo demás:

Proyectos nuevos
Aplicaciones pequeñas a medianas
Cuando quieres empezar rápido
Cuando el boilerplate de Redux te frustra
Cuando tu equipo es pequeño y ágil

Conclusión

Zustand no es solo "Redux simplificado". Es un replanteamiento de cómo debería ser state management en React moderno: simple, intuitivo y sin ceremonias innecesarias.

Dale una oportunidad en tu próximo proyecto. Te va a sorprender lo productivo que puedes ser cuando no estás peleando con tu manejador de estado.

Abrazo. bliss.

Zustand llegó para destronar a Redux

Héctorbliss

Mira el video:

El problema con Redux

Entra Zustand 🐻

Instalación

Tu primer store en 10 líneas

Usándolo en un componente

Comparación: Redux vs Zustand

Con Redux (versión moderna con toolkit)

Con Zustand

Features avanzadas

Persistencia con localStorage

Acciones asíncronas

Selectors para optimizar renders

¿Cuándo usar Redux?

¿Cuándo usar Zustand?

Conclusión

Cómo tipar eventos en React con TypeScript

Checa este otro Post

¡Ya no uses create-react-app!, por favor.

Checa este otro Post

Animaciones web con React + Motion 🧙🏻