Pulsy - Une bibliothèque légère de gestion d'état pour React

Pulsy est une bibliothèque de gestion d'état légère, flexible et facile à utiliser pour React qui fournit des fonctionnalités telles que la persistance, le middleware, la mémorisation, les magasins calculés et composés, le voyage dans le temps et l'intégration de DevTools. Il vous aide à gérer efficacement l'état global des applications React sans complexité inutile.

Caractéristiques

• Gestion globale de l'état : gérez l'état des composants à l'aide d'une simple API de magasin.
• Persistance : conserver automatiquement les données du magasin dans des solutions de stockage local ou personnalisées.
• Middleware : modifiez et gérez les mises à jour du magasin via des fonctions middleware.
• Mémoisation : évitez les rendus inutiles en utilisant des valeurs d'état mémorisées.
• Magasins calculés : dérivez et calculez l'état des magasins existants.
• Magasins composables : combinez plusieurs magasins en un seul pour une gestion modulaire de l'état.
• Voyage dans le temps : rembobinage et avance des changements d'état.
• Intégration de DevTools : suivez et déboguez les mises à jour de l'état en mode développement.

Installation

npm install pulsy
# or
yarn add pulsy

Utilisation de base

Étape 1 : Configurer Pulsy

Pulsy peut être configuré globalement pour activer les DevTools, la mémorisation par défaut, la persistance et les hooks de rappel pour la création et les mises à jour de magasins.

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),
});

Étape 2 : Créer une boutique

Pour créer une boutique, utilisez la fonction createStore. Un magasin contient l'état global et peut être utilisé n'importe où dans votre application React.

import { createStore } from 'pulsy';

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

Étape 3 : utiliser le Store dans un composant

Pulsy fournit le hook usePulsy pour accéder et mettre à jour la valeur du magasin dans vos composants React. Créons un composant compteur :

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;

Persistance

Pulsy facilite la conservation des valeurs de stockage dans localStorage ou tout autre système de stockage personnalisé. Passez simplement l'option persist lors de la création du magasin.

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

La valeur du magasin de compteur persistera désormais lors des rechargements de pages.

Exemple : utilisation du stockage personnalisé

Vous pouvez également configurer Pulsy pour utiliser un stockage personnalisé, tel que sessionStorage ou tout autre moteur de stockage implémentant l'interface de stockage :

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

Cela stockera sessionCounter dans sessionStorage.

Intergiciel

Le middleware vous permet d'intercepter et de modifier les mises à jour du magasin avant qu'elles ne soient validées. Vous pouvez ajouter un middleware lors de la création d'une boutique, ou ultérieurement en utilisant addMiddleware.

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

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

Dans cet exemple, le middleware enregistre chaque changement d'état dans le magasin du compteur.

Exemple : middleware asynchrone

Pulsy prend en charge le middleware asynchrone pour gérer les tâches asynchrones telles que les appels d'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] });

Dans cet exemple, le middleware récupère certaines données d'une API avant de mettre à jour le magasin.

Gestion de l'état du voyage dans le temps

Pulsy vous permet de gérer l'historique des états à l'aide du hook useTimeTravel, vous donnant la possibilité d'annuler et de rétablir les changements d'état.

import { useTimeTravel } from 'pulsy';

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

  return (
    

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

Exemple : Afficher l'historique de l'état

Vous pouvez accéder à l'historique complet des changements d'état à l'aide de historyRef fourni par useTimeTravel :

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

  return (
    

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

Magasins calculés

Les magasins calculés tirent leur état d'autres magasins. Pulsy permet de créer des boutiques dont les valeurs sont basées sur une ou plusieurs autres boutiques.

import { createComputedStore } from 'pulsy';

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

Ici, doubleCounter est automatiquement mis à jour chaque fois que le magasin du compteur change.

Exemple : Afficher le magasin calculé dans un composant

Vous pouvez désormais accéder au magasin calculé comme un magasin ordinaire :

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

  return (
    

      
Double Counter: {doubleCount}
    
  );
}

Composer des magasins

Pulsy prend en charge la composition de plusieurs magasins en un seul magasin. Ceci est particulièrement utile pour gérer un état complexe en regroupant des éléments d’état liés.

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}
    
  );
};

Exemple : mise à jour des magasins composés

Vous pouvez également mettre à jour des parties spécifiques d'un magasin composé à l'aide de la fonction setComposedStore :

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

Magasins avec espace de noms

Pulsy vous permet de créer des magasins avec espace de noms pour garder les magasins associés organisés et éviter les collisions de noms dans les applications volumineuses.

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
    
  );
}

Ici, tous les magasins liés à l'utilisateur (par exemple, user:username, user:age) sont regroupés sous l'espace de noms de l'utilisateur.

Intégration des outils de développement

Pulsy s'intègre aux DevTools du navigateur pour aider à suivre et à déboguer les mises à jour du magasin. Lorsque les DevTools sont activés, vous verrez des journaux sur les mises à jour du magasin, les changements d'état et les mesures de performances dans votre console.

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

Pulsy enregistre des informations utiles telles que la création ou la mise à jour d'un magasin, l'exécution du middleware et les actions de voyage dans le temps en mode développement.

Exemple complet : gestion du profil utilisateur avec persistance et middleware

Combinons plusieurs fonctionnalités de Pulsy en un seul exemple.

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;

Dans cet exemple, le magasin userProfile est persistant, enregistré par le middleware et accessible via le hook usePulsy. Le UserProfileComponent affiche et met à jour le magasin dans une interface utilisateur simple.

Conclusion

Pulsy est une bibliothèque de gestion d'état puissante et flexible pour React qui fournit une prise en charge prête à l'emploi pour la persistance, le middleware, les magasins calculés, le voyage dans le temps et les DevTools. Son API simple et sa large gamme de fonctionnalités le rendent adapté aux applications à petite et à grande échelle.