Zustand, una alternativa a Redux

Cuando se empieza a estudiar bibliotecas o Frameworks de Javascript como React, una parte dificil es manejar el estado global de una aplicacion. Es decir la forma en la podemos compartir un dato en varias partes de la aplicacion (componentes).

Es por eso que en React bibliotecas como Redux, MobX, o simplemente el uso de API Context con useReducer es esencial conocerlo para crear aplicaciones reales (ya sea en Web o en React native).

Pero lo dificil esta en que estas bibliotecas necesitan conceptos y codigo que se debe conocer muy bien, por ejemplo Redux es muy conocido por su codigo bastante complicado y el uso de conceptos como Reducers, Actions, y dispatch, sin contar otros mas (como manejo de codigo asincrono, o caching).

frameworks como solid o Svelte, por ejemplo no tienen este problema tan grande, e incluso tienen formas mas simples de resolverlos usando sus propias (Stores y Context).

Este es un ejemplo de Store creado en Svelte:

import { writable } from 'svelte/store'

type Notification = string

export const notifications = writable<Notification[]>([])

export function toast(message: string) {
  notifications.update((state) => [message, ...state])
  setTimeout(removeToast, 2000)
}

function removeToast() {
  notifications.update((state) => {
    return [...state.slice(0, state.length - 1)]
  })
}

Asi que si buscas algo mas simple, puedes usar Zustand, esta biblioteca te permite compartir datos en multiples componentes

No necesita que crees un Provider:

y Soporta Typescript

usarlo es tan facil como crear una funcion y exportarla:

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

Soporta la ejecucion de codigo asincrono y subscriptions (sin complicaciones como en Redux)

const useFishStore = create((set) => ({
  fishies: {},
  fetch: async (pond) => {
    const response = await fetch(pond)
    set({ fishies: await response.json() })
  },
}))

Y posee funciones que permiten guardar en localstorage, usar immer, o escribir tu estado como si fuera Redux ademas de poder integrarse o API Context y el DevTools de Redux.

E incluso si tienes un proyecto escrito solo en Javascript (Vanilla JS) tambien es posible usarlo.

Asi que si quieres una solucion mas simple y practica para tus proyectos esta puede ser muy recomendada