Xoid, Introducción a un administrador de estado pequeño y escalable para React

Para administrar el estado global en React existen muchas alternativas entre ellas las más conocidas como Redux y Mobx que son buenas opciones para muchos proyectos.
Investigando me encontré con una alternativa bastante interesante llamada Xoid un administrador de estados con una API sencilla, la manera en la que está escrita es semejante a otros adminstradores de estados globales basado en hooks como Recoil o Zustand.

Iniciaremos instalando el paquete necesario

Para instalarlo puedes usar yarn o npm, en este caso se usará yarn.

yarn add xoid

Comenzaremos creando una tienda

Para crear una tienda usamos la función create el cuál toma dos argumentos el primer valor es el estado(valores primitivos, objetos, arreglos), el segundo toma una función que retorna una serie de acciones en un objeto, no es la única forma de retornar ya que el tipo de valor devuelto puede ser un arreglo.

import { create, set } from "xoid";

// Tienda de un contador
const counterStore = create(0, (store) => ({
  increment: () => {
    set(store, (state) => state + 1));
  },
  decrement: () => {
    set(store, (state) => state - 1);
  }
}));

Como puedes observar la forma de crear una tienda es bastante sencilla.

Modificando el estado en un componente

Una vez creado la tienda para poder acceder a su estado y acciones usaremos el hook useStore que nos provee Xoid. Este hook tiene la misma estructura que useState en la cuál devuelve un arreglo de valores, el estado actual y el modificador.

import { useStore } from "xoid";

const Counter = () => {
  const [ counter, { increment, decrement } ] = useStore(counterStore);
  return(
   <div>
      <h1>Value: {counter}</h1>
      <button onClick={() => increment()}>increment</button>
      <button onClick={() => decrement()}>decrement</button>
   </div>
  );
}

Qué sigue ?

Ahora que conocemos la sintaxis básica iremos un paso más, en otra tienda llamada duplicateCounterStore nos suscribimos a la tienda creada anteriormente para poder duplicar su valor. ¿Cómo hacemos la subscripción a otra tienda?.
En vez de pasarle un valor al primer argumento lo que hacemos es pasarle una función la cuál nos permitirá almacenar un valor derivado de otras tiendas.

const duplicateCounterStore = create(
 get => get(counterStore) * 2
);

De esta manera cada vez que cambie el valor de una tienda a la que esté suscrita, ella también cambiará su estado y podremos usarlo de la manera en que se requiera.
Para finalizar usaremos la nueva tienda creada en nuestro componente Counter.

import { useStore } from "xoid";

const Counter = () => {
  const [ counter, { increment, decrement } ] = useStore(counterStore);
  const [ duplicateCounter ] = useStore(duplicateCounterStore);
  return(
   <div>
      <h1>Value 1: {counter}</h1>
      <h2>Value 2: {duplicateCounter}</h2>
      <button onClick={() => increment()}>increment</button>
      <button onClick={() => decrement()}>decrement</button>
   </div>
  );
}

Como puedes ver es bastante sencillo sin embargo tiene muchas más características interesantes como el uso de selectores, máquinas de estado, actualización de objetos anidados muy sencillo, acciones asincrónicas, estados locales y muchas cosas más😊.
Ahora que conoces una breve introducción a este manejador de estado te invito a explorar más en su documentación de Xoid.