Pulsy: una biblioteca ligera de gestión de estados para React

Pulsy es una biblioteca de administración de estado liviana, flexible y fácil de usar para React que proporciona características como persistencia, middleware, memorización, tiendas computadas y compuestas, viajes en el tiempo e integración de DevTools. Le ayuda a gestionar eficientemente el estado global en aplicaciones React sin complejidad innecesaria.

Características

• Gestión del estado global: gestiona el estado de todos los componentes mediante una API de tienda sencilla.
• Persistencia: persiste automáticamente los datos de la tienda en almacenamiento local o soluciones de almacenamiento personalizadas.
• Middleware: modifica y maneja las actualizaciones de la tienda a través de funciones de middleware.
• Memorización: Evite renderizaciones innecesarias utilizando valores de estado memorizados.
• Tiendas calculadas: deriva y calcula el estado de las tiendas existentes.
• Tiendas componibles: combina varias tiendas en una para una gestión de estado modular.
• Viaje en el tiempo: Rebobinar y avanzar cambios de estado.
• Integración de DevTools: seguimiento y depuración de actualizaciones de estado en modo de desarrollo.

Instalación

npm install pulsy
# or
yarn add pulsy

Uso básico

Paso 1: Configurar Pulsy

Pulsy se puede configurar globalmente para habilitar DevTools, memorización predeterminada, persistencia y ganchos de devolución de llamada para la creación y actualización de tiendas.

import { configurePulsy } from 'pulsy';

configurePulsy({
  enableDevTools: process.env.NODE_ENV === 'development',
  persist: true, // Globally enable persistence by default
  defaultMemoize: true, // Enable memoization for all stores by default
  onStoreCreate: (name, initialValue) => console.log(`Store "${name}" created! Initial value:`, initialValue),
  onStoreUpdate: (name, newValue) => console.log(`Store "${name}" updated! New value:`, newValue),
});

Paso 2: crea una tienda

Para crear una tienda, use la función createStore. Una tienda contiene el estado global y se puede usar en cualquier lugar de su aplicación React.

import { createStore } from 'pulsy';

// Create a store named 'counter' with an initial value of 0
createStore('counter', 0);

Paso 3: use la tienda en un componente

Pulsy proporciona el gancho usePulsy para acceder y actualizar el valor de la tienda en sus componentes de React. Creemos un componente de contador:

import usePulsy from 'pulsy';

function CounterComponent() {
  const [count, setCount] = usePulsy('counter');

  const increment = () => setCount((prev) => prev   1);

  return (
    

      
Current Count: {count}
      Increment
    
  );
}

export default CounterComponent;

Persistencia

Pulsy facilita la conservación de los valores de la tienda en localStorage o en cualquier otro sistema de almacenamiento personalizado. Simplemente pase la opción persistir al crear la tienda.

createStore('counter', 0, { persist: true });

El valor de la tienda del contador ahora persistirá durante las recargas de la página.

Ejemplo: uso de almacenamiento personalizado

También puedes configurar Pulsy para usar almacenamiento personalizado, como sessionStorage o cualquier otro motor de almacenamiento que implemente la interfaz de Almacenamiento:

createStore('sessionCounter', 0, {
  persist: {
    storage: sessionStorage, // Use sessionStorage instead of localStorage
    serialize: (value) => JSON.stringify(value),
    deserialize: (value) => JSON.parse(value),
  },
});

Esto almacenará el contador de sesiones en el almacenamiento de sesiones.

software intermedio

El middleware le permite interceptar y modificar las actualizaciones de la tienda antes de que se envíen. Puedes agregar middleware al crear una tienda o más adelante usando addMiddleware.

const loggingMiddleware = (nextValue, prevValue, storeName) => {
  console.log(`[${storeName}] changed from ${prevValue} to ${nextValue}`);
  return nextValue;
};

createStore('counter', 0, { middleware: [loggingMiddleware] });

En este ejemplo, el middleware registra cada cambio de estado en el almacén del contador.

Ejemplo: middleware asincrónico

Pulsy admite middleware asincrónico para manejar tareas asincrónicas como llamadas API:

const asyncMiddleware = async (nextValue, prevValue, storeName) => {
  console.log(`Fetching data before updating ${storeName}...`);
  const data = await fetch('https://api.example.com/data').then((res) => res.json());
  return nextValue   data.amount;
};

createStore('counter', 0, { middleware: [asyncMiddleware] });

En este ejemplo, el middleware obtiene algunos datos de una API antes de actualizar la tienda.

Gestión del estado del viaje en el tiempo

Pulsy te permite administrar el historial de estado usando el gancho useTimeTravel, lo que te brinda la posibilidad de deshacer y rehacer cambios de estado.

import { useTimeTravel } from 'pulsy';

function TimeTravelCounter() {
  const [count, setCount, undo, redo] = useTimeTravel('counter');

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
      Undo
      Redo
    
  );
}

Ejemplo: Mostrar historial de estado

Puedes acceder al historial completo de cambios de estado utilizando el historialRef proporcionado por useTimeTravel:

function HistoryCounter() {
  const [count, setCount, undo, redo, history] = useTimeTravel('counter');

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
      Undo
      Redo
      
History: {history.join(', ')}
    
  );
}

Tiendas Computadas

Las tiendas calculadas derivan su estado de otras tiendas. Pulsy te permite crear tiendas cuyos valores se basan en una o más tiendas.

import { createComputedStore } from 'pulsy';

createComputedStore('doubleCounter', () => {
  const counter = getStoreValue('counter');
  return counter * 2;
}, ['counter']);

Aquí, doubleCounter se actualiza automáticamente cada vez que cambia la tienda del mostrador.

Ejemplo: mostrar el almacén calculado en un componente

Ahora puedes acceder a la tienda calculada como a una tienda normal:

function DoubleCounterComponent() {
  const [doubleCount] = usePulsy('doubleCounter');

  return (
    

      
Double Counter: {doubleCount}
    
  );
}

Componer tiendas

Pulsy admite la composición de varias tiendas en una sola tienda. Esto es especialmente útil para gestionar estados complejos agrupando partes de estado relacionadas.

import { composeStores } from 'pulsy';

const [getComposedStore, setComposedStore] = composeStores('userProfile', {
  username: 'userNameStore',
  age: 'ageStore',
});

const UserProfileComponent = () => {
  const userProfile = getComposedStore();

  return (
    

      
Username: {userProfile.username}
      
Age: {userProfile.age}
    
  );
};

Ejemplo: actualización de tiendas compuestas

También puedes actualizar partes específicas de una tienda compuesta usando la función setComposedStore:

setComposedStore({
  username: 'newUsername',
});

Tiendas con espacios de nombres

Pulsy te permite crear tiendas con espacios de nombres para mantener organizadas las tiendas relacionadas y evitar colisiones de nombres en aplicaciones grandes.

import { createNamespacedStore } from 'pulsy';

// Create a namespaced store for user-related data
const useUserStore = createNamespacedStore('user');

function UserComponent() {
  const [username, setUsername] = useUserStore('username');

  return (
    

      
Username: {username}
       setUsername('newUsername')}>Update Username
    
  );
}

Aquí, todas las tiendas relacionadas con el usuario (por ejemplo, usuario:nombre de usuario, usuario:edad) se agrupan en el espacio de nombres de usuario.

Integración de herramientas de desarrollo

Pulsy se integra con DevTools del navegador para ayudar a rastrear y depurar las actualizaciones de la tienda. Cuando DevTools esté habilitado, verás registros sobre actualizaciones de la tienda, cambios de estado y mediciones de rendimiento en tu consola.

configurePulsy({
  enableDevTools: true, // Logs detailed store activity to the console
});

Pulsy registra información útil, como cuándo se crea o actualiza una tienda, la ejecución del middleware y las acciones de viaje en el tiempo en el modo de desarrollo.

Ejemplo completo: gestión del perfil de usuario con persistencia y middleware

Combinemos varias funciones de Pulsy en un solo ejemplo.

import { createStore, usePulsy, configurePulsy } from 'pulsy';

// Global configuration
configurePulsy({
  enableDevTools: true,
  persist: true,
});

// Middleware to log store updates
const loggingMiddleware = (nextValue, prevValue, storeName) => {
  console.log(`Store ${storeName}

 updated from ${prevValue} to ${nextValue}`);
  return nextValue;
};

// Create a store for user profile
createStore('userProfile', {
  username: 'guest',
  age: 25,
}, { middleware: [loggingMiddleware], persist: true });

// Component to manage user profile
function UserProfileComponent() {
  const [userProfile, setUserProfile] = usePulsy('userProfile');

  const updateUsername = () => {
    setUserProfile((prevProfile) => ({
      ...prevProfile,
      username: 'newUsername',
    }));
  };

  return (
    

      
Username: {userProfile.username}
      
Age: {userProfile.age}
      Change Username
    
  );
}

export default UserProfileComponent;

En este ejemplo, el almacén de perfil de usuario persiste, se registra mediante middleware y se puede acceder a él a través del gancho usePulsy. UserProfileComponent muestra y actualiza la tienda en una interfaz de usuario simple.

Conclusión

Pulsy es una biblioteca de administración de estado poderosa y flexible para React que brinda soporte listo para usar para persistencia, middleware, almacenes computacionales, viajes en el tiempo y DevTools. Su API simple y su amplia gama de funciones lo hacen adecuado para aplicaciones tanto de pequeña como de gran escala.