¿Zustand es el nuevo Redux?

Fuente: https://storyset.com/illustration/data-extraction/bro#6900FFFF&hide=&hide=complete

Redux:

En el año 2015 se realizó el lanzamiento inicial de redux, desde ese momento ha sido la librería líder en cuanto al manejo centralizado de estados de una aplicación, sobre todo enfocado en react.

Sus ventajas más importantes son:

Comportamiento predictivo en base al entorno y estado a ejecutar, lo que mejora enormemente el rendimiento a la hora del desarrollo

Una extensa comunidad que apoya y ayuda a crecer la librería

Una larga cantidad de extensiones como lo es, por ejemplo: Redux Toolkit. Haciendo que sea más precisa la depuración y entender dónde puede haber un fallo o una mejora en el estado que manejamos.

Desventajas:

Una curva de aprendizaje alta, sobre todo si eres nuevo en javascript

Requiere cierta complejidad para añadir acciones y middlewares en ciertas ocasiones

Ocupa muchas líneas de código solo para la configuración

Zustand:

Es una librería con el objetivo de ser liviana y cumplir las funciones lo mejor posible en el menor número de líneas de código posibles, su principal enfoque es la flexibilidad entre estados y la optimización en cuanto a la aplicación en cuestión.

Las ventajas por las que es interesante son:

Es una liberaría bastante liviana, con solo 1.2 Kb de tamaño.

Su configuración solo consta de menos de 10 líneas de código y es intuitiva.

Al ser fácilmente configurable, es flexible en cuanto a sus acciones y datos.

Tiene un rendimiento y optimización superior a librerías con el mismo fin.

Desventajas:

Su comunidad es menor (Aunque se encuentra en aumento) en comparación a redux y por ende tiende a tener poca compatibilidad o extensiones en general

No tiene un comportamiento predictivo al no usar context.

La mejor opción para mi proyecto

Es difícil dar una respuesta certera, ya que cada proyecto es único y puede variar dependiendo de cada situación, sin embargo, lo recomendado según la comunidad es que si el proyecto es pequeño o mediano usar zustand y si hablamos de un proyecto grande que se basa en escalabilidad, se sugiere usar redux.

Ahora, hablando de código hay una clara diferencia, de uno con el otro, en esta comparación queda claro Zustand vs la competencia.

La implementación de redux Toolkit sería:

import { useSelector } from 'react-redux'  
mport type { TypedUseSelectorHook } from 'react-redux' 
import { createSlice, configureStore } from '@reduxjs/toolkit' 
 
const countSlice = createSlice({  
name: 'count',  
initialState: { value: 0 }, 
reducers: {  
incremented: (state, qty: number) => {  
state.value += qty  
},  
decremented: (state, qty: number) => {  
state.value -= qty  
},  
},  
})  
 
const countStore = configureStore({ reducer: countSlice.reducer })  
 
const useAppSelector: TypedUseSelectorHook<typeof countStore.getState> = useSelector 
 
const useAppDispatch: () => typeof countStore.dispatch = useDispatch 
 
const Component = () => { 
const count = useAppSelector((state) => state.count.value) 
const dispatch = useAppDispatch() 
}

Mientras que en zustand el modelo es:

import { create } from 'zustand' 
  
type State = { 
  count: number 
} 
  
type Actions = { 
  increment: (qty: number) => void 
  decrement: (qty: number) => void 
} 
  
const useCountStore = create<State & Actions>((set) => ({ 
  count: 0, 
  increment: (qty: number) => set((state) => ({ count: state.count + qty })), 
  decrement: (qty: number) => set((state) => ({ count: state.count - qty })), 
})) 
  
const Component = () => { 
  const count = useCountStore((state) => state.count) 
  const increment = useCountStore((state) => state.increment) 
  const decrement = useCountStore((state) => state.decrement) 
}

Sin duda es importante conocer los dos si hablamos de manejo de estados, zustand resulta más sencillo de aprender y por ende más viable en muchos casos y por otra parte redux por su largo tiempo de soporte y crecimiento, es muy probable que lo encuentres implementado en la mayoría de los proyectos que actualmente están en producción.