Pulsy — легкая библиотека управления состоянием для React

Pulsy — это легкая, гибкая и простая в использовании библиотека управления состоянием для React, которая предоставляет такие функции, как сохранение, промежуточное программное обеспечение, запоминание, вычисляемые и составленные хранилища, путешествия во времени и интеграцию с DevTools. Это помогает вам эффективно управлять глобальным состоянием в приложениях React без лишних сложностей.

Функции

• Глобальное управление состоянием: управляйте состоянием компонентов с помощью простого API магазина.
• Постоянство: автоматическое сохранение данных хранилища в localStorage или пользовательских решениях для хранения.
• Промежуточное программное обеспечение: изменение и обработка обновлений магазина с помощью функций промежуточного программного обеспечения.
• Мемоизация: избегайте ненужной визуализации, используя мемоизированные значения состояния.
• Вычисляемые хранилища: получение и расчет состояния на основе существующих магазинов.
• Составные хранилища: объединение нескольких магазинов в одно для модульного управления состоянием.
• Путешествие во времени: перемотка назад и вперед изменений состояния.
• Интеграция с DevTools: отслеживание и отладка обновлений состояния в режиме разработки.

Установка

npm install pulsy
# or
yarn add pulsy

Основное использование

Шаг 1. Настройте Pulsy

Pulsy можно настроить глобально, чтобы включить DevTools, запоминание по умолчанию, сохранение и обратные вызовы для создания и обновления магазина.

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

Шаг 2: Создайте магазин

Чтобы создать магазин, используйте функцию createStore. Магазин хранит глобальное состояние и может использоваться где угодно в вашем приложении React.

import { createStore } from 'pulsy';

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

Шаг 3. Используйте хранилище в компоненте

Pulsy предоставляет хук usePulsy для доступа и обновления значения хранилища в ваших компонентах React. Давайте создадим компонент счетчика:

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;

Упорство

Pulsy позволяет легко сохранять значения хранилища в localStorage или любой другой пользовательской системе хранения. Просто передайте параметр persist при создании магазина.

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

Значение хранилища счетчиков теперь будет сохраняться при перезагрузке страницы.

Пример: использование специального хранилища

Вы также можете настроить Pulsy на использование собственного хранилища, например sessionStorage или любого другого механизма хранения, реализующего интерфейс хранилища:

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

Это сохранит счетчик сеансов в sessionStorage.

Промежуточное ПО

Промежуточное ПО позволяет перехватывать и изменять обновления магазина до их фиксации. Вы можете добавить промежуточное ПО при создании магазина или позже с помощью addMiddleware.

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

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

В этом примере промежуточное программное обеспечение регистрирует каждое изменение состояния в хранилище счетчиков.

Пример: асинхронное промежуточное программное обеспечение

Pulsy поддерживает асинхронное промежуточное ПО для обработки асинхронных задач, таких как вызовы 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] });

В этом примере промежуточное ПО извлекает некоторые данные из API перед обновлением хранилища.

Управление состоянием путешествий во времени

Pulsy позволяет вам управлять историей состояний с помощью хука useTimeTravel, что дает вам возможность отменять и повторять изменения состояния.

import { useTimeTravel } from 'pulsy';

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

  return (
    

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

Пример: отображение истории состояний

Вы можете получить доступ к полной истории изменений состояния, используя HistoryRef, предоставленный useTimeTravel:

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

  return (
    

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

Компьютерные магазины

Вычисляемые хранилища получают свое состояние от других хранилищ. Pulsy позволяет создавать магазины, значения которых основаны на значениях одного или нескольких других магазинов.

import { createComputedStore } from 'pulsy';

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

Здесь doubleCounter автоматически обновляется при каждом изменении хранилища счетчиков.

Пример. Отображение вычисляемого хранилища в компоненте

Теперь вы можете получить доступ к компьютерному хранилищу, как к обычному хранилищу:

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

  return (
    

      
Double Counter: {doubleCount}
    
  );
}

Составление магазинов

Pulsy поддерживает объединение нескольких магазинов в один. Это особенно полезно для управления сложным состоянием путем группировки связанных частей состояния вместе.

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

Пример: обновление составных хранилищ

Вы также можете обновить определенные части составного хранилища с помощью функции setComposeStore:

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

Магазины в пространстве имен

Pulsy позволяет создавать хранилища с пространством имен, чтобы поддерживать порядок связанных хранилищ и избегать конфликтов имен в больших приложениях.

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

Здесь все хранилища, связанные с пользователем (например, пользователь:имя пользователя, пользователь:возраст), сгруппированы в пространстве имен пользователя.

Интеграция с инструментами разработчика

Pulsy интегрируется с DevTools браузера, помогая отслеживать и отлаживать обновления магазина. Когда DevTools включены, вы увидите журналы об обновлениях магазина, изменениях состояния и измерениях производительности в вашей консоли.

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

Pulsy регистрирует полезную информацию, например, когда создается или обновляется магазин, выполнение промежуточного программного обеспечения и действия с перемещением во времени в режиме разработки.

Полный пример: управление профилем пользователя с помощью сохраняемости и промежуточного программного обеспечения

Давайте объединим несколько функций Pulsy в один пример.

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;

В этом примере хранилище userProfile сохраняется, регистрируется промежуточным программным обеспечением и доступно через перехватчик usePulsy. UserProfileComponent отображает и обновляет магазин в простом пользовательском интерфейсе.

Заключение

Pulsy — это мощная и гибкая библиотека управления состоянием для React, которая обеспечивает готовую поддержку персистентности, промежуточного программного обеспечения, вычислительных хранилищ, путешествий во времени и DevTools. Простой API и широкий спектр функций делают его подходящим как для небольших, так и для крупномасштабных приложений.