Pulsy - uma biblioteca leve de gerenciamento de estado para React

Pulsy é uma biblioteca de gerenciamento de estado leve, flexível e fácil de usar para React que fornece recursos como persistência, middleware, memoização, armazenamentos computados e compostos, viagem no tempo e integração com DevTools. Ele ajuda você a gerenciar com eficiência o estado global em aplicativos React sem complexidade desnecessária.

Características

• Gerenciamento de estado global: gerencie o estado dos componentes usando uma API de loja simples.
• Persistência: persiste automaticamente os dados armazenados no localStorage ou em soluções de armazenamento personalizadas.
• Middleware: Modifique e administre atualizações da loja por meio de funções de middleware.
• Memoização: evite renderizações desnecessárias usando valores de estado memorizados.
• Lojas computadas: Derive e calcule o estado das lojas existentes.
• Composable Stores: Combine várias lojas em uma única loja para gerenciamento modular de estado.
• Viagem no tempo: Retrocede e avança mudanças de estado.
• Integração do DevTools: rastreie e depure atualizações de estado no modo de desenvolvimento.

Instalação

npm install pulsy
# or
yarn add pulsy

Uso Básico

Etapa 1: configurar o Pulsy

Pulsy pode ser configurado globalmente para habilitar DevTools, memoização padrão, persistência e ganchos de retorno de chamada para criação e atualizações de lojas.

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

Etapa 2: crie uma loja

Para criar uma loja, use a função createStore. Uma loja contém o estado global e pode ser usada em qualquer lugar do seu aplicativo React.

import { createStore } from 'pulsy';

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

Etapa 3: usar o armazenamento em um componente

Pulsy fornece o gancho usePulsy para acessar e atualizar o valor da loja em seus componentes React. Vamos criar um componente 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;

Persistência

Pulsy facilita a persistência de valores de armazenamento em localStorage ou qualquer outro sistema de armazenamento personalizado. Basta passar a opção persist ao criar a loja.

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

O valor do armazenamento do contador agora persistirá durante as recargas da página.

Exemplo: usando armazenamento personalizado

Você também pode configurar o Pulsy para usar armazenamento personalizado, como sessionStorage ou qualquer outro mecanismo de armazenamento que implemente a interface Storage:

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

Isso armazenará sessionCounter em sessionStorage.

Middleware

O middleware permite interceptar e modificar as atualizações da loja antes que elas sejam confirmadas. Você pode adicionar middleware ao criar uma loja ou posteriormente usando addMiddleware.

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

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

Neste exemplo, o middleware registra cada mudança de estado no armazenamento do contador.

Exemplo: Middleware Assíncrono

Pulsy oferece suporte a middleware assíncrono para lidar com tarefas assíncronas, como chamadas de 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] });

Neste exemplo, o middleware busca alguns dados de uma API antes de atualizar a loja.

Gerenciamento de estado de viagem no tempo

Pulsy permite que você gerencie o histórico de estado usando o gancho useTimeTravel, oferecendo a capacidade de desfazer e refazer alterações de estado.

import { useTimeTravel } from 'pulsy';

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

  return (
    

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

Exemplo: Exibir histórico de estado

Você pode acessar o histórico completo de mudanças de estado usando o historyRef fornecido por useTimeTravel:

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

  return (
    

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

Lojas Informáticas

As lojas de informática derivam seu estado de outras lojas. Pulsy permite criar lojas cujos valores são baseados em uma ou mais lojas.

import { createComputedStore } from 'pulsy';

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

Aqui, doubleCounter é atualizado automaticamente sempre que o armazenamento do contador muda.

Exemplo: Exibir armazenamento computado em um componente

Agora você pode acessar a loja informatizada como uma loja normal:

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

  return (
    

      
Double Counter: {doubleCount}
    
  );
}

Compondo Lojas

Pulsy suporta a composição de várias lojas em uma única loja. Isso é especialmente útil para gerenciar estados complexos 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}
    
  );
};

Exemplo: Atualizando Lojas Compostas

Você também pode atualizar partes específicas de uma loja composta usando a função setComposedStore:

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

Lojas com namespace

Pulsy permite que você crie lojas com namespaces para manter lojas relacionadas organizadas e evitar colisões de nomes em aplicativos 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
    
  );
}

Aqui, todos os armazenamentos relacionados ao usuário (por exemplo, usuário:nomedeusuário, usuário:idade) são agrupados no namespace do usuário.

Integração com DevTools

Pulsy se integra ao DevTools do navegador para ajudar a rastrear e depurar atualizações da loja. Quando o DevTools estiver ativado, você verá registros sobre atualizações da loja, alterações de estado e medições de desempenho em seu console.

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

Pulsy registra informações úteis, como quando uma loja é criada ou atualizada, execução de middleware e ações de viagem no tempo no modo de desenvolvimento.

Exemplo completo: gerenciando perfil de usuário com persistência e middleware

Vamos combinar vários recursos do Pulsy em um único exemplo.

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;

Neste exemplo, o armazenamento userProfile é persistente, registrado pelo middleware e acessível por meio do gancho usePulsy. O UserProfileComponent exibe e atualiza a loja em uma UI simples.

Conclusão

Pulsy é uma biblioteca de gerenciamento de estado poderosa e flexível para React que fornece suporte pronto para uso para persistência, middleware, armazenamentos computados, viagem no tempo e DevTools. Sua API simples e ampla gama de recursos o tornam adequado para aplicações de pequena e grande escala.