Pulsy - React를 위한 경량 상태 관리 라이브러리

Pulsy는 지속성, 미들웨어, 메모, 계산 및 구성된 저장소, 시간 여행, DevTools 통합과 같은 기능을 제공하는 가볍고 유연하며 사용하기 쉬운 React용 상태 관리 라이브러리입니다. 불필요한 복잡성 없이 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 함수를 사용하세요. Store는 전역 상태를 보유하며 React 애플리케이션 어디에서나 사용할 수 있습니다.

import { createStore } from 'pulsy';

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

3단계: 구성 요소에서 저장소 사용

Pulsy는 React 구성 요소의 저장소 값에 액세스하고 업데이트할 수 있는 usePulsy 후크를 제공합니다. 카운터 구성 요소를 만들어 보겠습니다.

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 또는 기타 사용자 정의 스토리지 시스템에 저장 값을 쉽게 유지할 수 있습니다. 스토어를 생성할 때 지속 옵션을 전달하기만 하면 됩니다.

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

이제 페이지를 다시 로드해도 카운터 상점의 가치가 유지됩니다.

예: 사용자 정의 스토리지 사용

sessionStorage 또는 Storage 인터페이스를 구현하는 기타 스토리지 엔진과 같은 사용자 정의 스토리지를 사용하도록 Pulsy를 구성할 수도 있습니다.

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

이것은 sessionStorage에 sessionCounter를 저장합니다.

미들웨어

미들웨어를 사용하면 스토어 업데이트가 커밋되기 전에 가로채고 수정할 수 있습니다. 스토어를 생성할 때 미들웨어를 추가하거나 나중에 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
    
  );
}

예: 상태 기록 표시

useTimeTravel에서 제공하는 HistoryRef를 사용하여 상태 변경의 전체 기록에 액세스할 수 있습니다:

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

예: 구성된 상점 업데이트

setComposedStore 함수를 사용하여 구성된 저장소의 특정 부분을 업데이트할 수도 있습니다.

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

여기서 모든 사용자 관련 저장소(예: 사용자:사용자 이름, 사용자:나이)는 사용자 네임스페이스 아래에 그룹화됩니다.

DevTools 통합

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는 간단한 UI로 스토어를 표시하고 업데이트합니다.

결론

Pulsy는 지속성, 미들웨어, 계산된 저장소, 시간 이동 및 DevTools에 대한 기본 지원을 제공하는 강력하고 유연한 React용 상태 관리 라이브러리입니다. 간단한 API와 다양한 기능으로 인해 소규모 및 대규모 애플리케이션 모두에 적합합니다.