Pulsy – Eine leichtgewichtige Zustandsverwaltungsbibliothek für React

Pulsy ist eine leichte, flexible und benutzerfreundliche Zustandsverwaltungsbibliothek für React, die Funktionen wie Persistenz, Middleware, Memoisierung, berechnete und zusammengesetzte Speicher, Zeitreisen und DevTools-Integration bietet. Es hilft Ihnen, den globalen Status in React-Anwendungen effizient und ohne unnötige Komplexität zu verwalten.

Merkmale

• Globales Statusmanagement: Verwalten Sie den Status über Komponenten hinweg mithilfe einer einfachen Store-API.
• Persistenz: Speichern Sie Daten automatisch in localStorage oder benutzerdefinierten Speicherlösungen.
• Middleware: Ändern und verwalten Sie Store-Updates über Middleware-Funktionen.
• Memoisierung: Vermeiden Sie unnötiges Rendern, indem Sie gespeicherte Zustandswerte verwenden.
• Berechnete Geschäfte: Leiten Sie den Zustand aus vorhandenen Geschäften ab und berechnen Sie ihn.
• Zusammensetzbare Stores: Kombinieren Sie mehrere Stores in einem Store für eine modulare Statusverwaltung.
• Zeitreise: Statusänderungen zurückspulen und weiterleiten.
• DevTools-Integration: Verfolgen und debuggen Sie Statusaktualisierungen im Entwicklungsmodus.

Installation

npm install pulsy
# or
yarn add pulsy

Grundlegende Verwendung

Schritt 1: Pulsy konfigurieren

Pulsy kann global konfiguriert werden, um DevTools, Standard-Memoisierung, Persistenz und Callback-Hooks für die Shop-Erstellung und -Updates zu aktivieren.

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

Schritt 2: Erstellen Sie einen Shop

Um einen Shop zu erstellen, verwenden Sie die Funktion createStore. Ein Store speichert den globalen Status und kann überall in Ihrer React-Anwendung verwendet werden.

import { createStore } from 'pulsy';

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

Schritt 3: Verwenden Sie den Store in einer Komponente

Pulsy stellt den usePulsy-Hook bereit, um auf den Store-Wert in Ihren React-Komponenten zuzugreifen und ihn zu aktualisieren. Lassen Sie uns eine Gegenkomponente erstellen:

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;

Beharrlichkeit

Pulsy macht es einfach, Speicherwerte in localStorage oder einem anderen benutzerdefinierten Speichersystem beizubehalten. Übergeben Sie einfach die Persist-Option beim Erstellen des Stores.

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

Der Wert des Zählerspeichers bleibt nun über das Neuladen der Seite hinweg bestehen.

Beispiel: Benutzerdefinierten Speicher verwenden

Sie können Pulsy auch so konfigurieren, dass es benutzerdefinierten Speicher verwendet, z. B. sessionStorage oder eine andere Speicher-Engine, die die Speicherschnittstelle implementiert:

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

Dadurch wird sessionCounter im sessionStorage gespeichert.

Middleware

Mit Middleware können Sie Store-Updates abfangen und ändern, bevor sie festgeschrieben werden. Sie können Middleware hinzufügen, wenn Sie einen Shop erstellen oder später addMiddleware verwenden.

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

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

In diesem Beispiel protokolliert die Middleware jede Zustandsänderung im Zählerspeicher.

Beispiel: Asynchrone Middleware

Pulsy unterstützt asynchrone Middleware für die Abwicklung asynchroner Aufgaben wie API-Aufrufe:

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

In diesem Beispiel ruft die Middleware einige Daten von einer API ab, bevor sie den Store aktualisiert.

Zeitreise-Zustandsmanagement

Mit Pulsy können Sie den Statusverlauf mithilfe des useTimeTravel-Hooks verwalten und so Statusänderungen rückgängig machen und wiederherstellen.

import { useTimeTravel } from 'pulsy';

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

  return (
    

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

Beispiel: Statusverlauf anzeigen

Sie können auf den vollständigen Verlauf der Statusänderungen zugreifen, indem Sie die von useTimeTravel bereitgestellte HistoryRef verwenden:

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

  return (
    

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

Computerspeicher

Berechnete Geschäfte leiten ihren Zustand von anderen Geschäften ab. Mit Pulsy können Sie Shops erstellen, deren Werte auf einem oder mehreren anderen Shops basieren.

import { createComputedStore } from 'pulsy';

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

Hier wird doubleCounter automatisch aktualisiert, wenn sich der Zählerspeicher ändert.

Beispiel: Berechneten Speicher in einer Komponente anzeigen

Sie können jetzt wie auf einen normalen Shop auf den berechneten Shop zugreifen:

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

  return (
    

      
Double Counter: {doubleCount}
    
  );
}

Zusammenstellen von Geschäften

Pulsy unterstützt die Zusammenfassung mehrerer Geschäfte zu einem einzigen Geschäft. Dies ist besonders nützlich für die Verwaltung komplexer Zustände durch Gruppieren zusammengehöriger Zustandsteile.

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

Beispiel: Zusammengesetzte Stores aktualisieren

Sie können auch bestimmte Teile eines zusammengesetzten Speichers mit der setComposedStore-Funktion aktualisieren:

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

Namespace-Stores

Mit Pulsy können Sie Namespace-Stores erstellen, um verwandte Stores organisiert zu halten und Namenskonflikte in großen Anwendungen zu vermeiden.

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

Hier werden alle benutzerbezogenen Stores (z. B. Benutzer:Benutzername, Benutzer:Alter) unter dem Benutzernamensraum gruppiert.

DevTools-Integration

Pulsy lässt sich in die DevTools des Browsers integrieren, um Store-Updates zu verfolgen und zu debuggen. Wenn DevTools aktiviert sind, werden in Ihrer Konsole Protokolle zu Store-Updates, Statusänderungen und Leistungsmessungen angezeigt.

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

Pulsy protokolliert hilfreiche Informationen, z. B. wenn ein Geschäft erstellt oder aktualisiert wird, Middleware-Ausführung und Zeitreiseaktionen im Entwicklungsmodus.

Vollständiges Beispiel: Benutzerprofil mit Persistenz und Middleware verwalten

Lassen Sie uns mehrere Pulsy-Funktionen in einem einzigen Beispiel kombinieren.

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;

In diesem Beispiel wird der userProfile-Speicher beibehalten, von der Middleware protokolliert und ist über den usePulsy-Hook zugänglich. Die UserProfileComponent zeigt den Store in einer einfachen Benutzeroberfläche an und aktualisiert ihn.

Abschluss

Pulsy ist eine leistungsstarke und flexible Zustandsverwaltungsbibliothek für React, die sofort einsatzbereite Unterstützung für Persistenz, Middleware, Computerspeicher, Zeitreisen und DevTools bietet. Aufgrund seiner einfachen API und seines breiten Funktionsumfangs eignet es sich sowohl für kleine als auch für große Anwendungen.