Pulsy - React 用の軽量の状態管理ライブラリ

Pulsy は、永続性、ミドルウェア、メモ化、計算および合成されたストア、タイム トラベル、DevTools 統合などの機能を提供する、軽量かつ柔軟で使いやすい React 用の状態管理ライブラリです。これは、不必要な複雑さを伴うことなく、React アプリケーションのグローバル状態を効率的に管理するのに役立ちます。

特徴

• グローバル状態管理: シンプルなストア API を使用してコンポーネント全体の状態を管理します。
• 永続性: ストア データを localStorage またはカスタム ストレージ ソリューションに自動的に永続化します。
• ミドルウェア: ミドルウェア機能を通じてストアの更新を変更および処理します。
• メモ化: メモ化された状態値を使用して、不必要なレンダリングを回避します。
• 計算ストア: 既存のストアから状態を導出して計算します。
• コンポーザブル ストア: モジュール状態管理のために複数のストアを 1 つのストアに結合します。
• タイムトラベル: 状態の変化を巻き戻したり進めたりします。
• 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 は、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 またはその他のカスタム ストレージ システムにストア値を簡単に永続化できます。ストアを作成するときに、persist オプションを渡すだけです。

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

カウンタ ストアの値は、ページがリロードされても保持されるようになりました。

例: カスタム ストレージの使用

sessionStorage やストレージ インターフェイスを実装するその他のストレージ エンジンなどのカスタム ストレージを使用するように Pulsy を設定することもできます。

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

これにより、sessionCounter が 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
    
  );
}

例: 状態履歴の表示

useTimeTravel:

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

  return (
    

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

計算ストア

計算ストアは他のストアから状態を取得します。 Pulsy を使用すると、値が 1 つ以上の他のストアに基づくストアを作成できます。

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 は、複数のストアを 1 つのストアに統合することをサポートしています。これは、関連する状態の部分をグループ化して複雑な状態を管理する場合に特に便利です。

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

例: 構成されたストアの更新

setCompedStore 関数を使用して、合成ストアの特定の部分を更新することもできます:

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

ここでは、すべてのユーザー関連ストア (例: user:username、user:age) がユーザー名前空間の下にグループ化されています。

開発ツールの統合

Pulsy はブラウザ DevTools と統合して、ストアの更新の追跡とデバッグを支援します。 DevTools が有効になっている場合、ストアの更新、状態の変更、パフォーマンス測定に関するログがコンソールに表示されます。

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

Pulsy は、ストアの作成時や更新時、ミドルウェアの実行、開発モードでのタイムトラベル アクションなど、役立つ情報をログに記録します。

完全な例: 永続性とミドルウェアを使用したユーザー プロファイルの管理

複数の Pulsy 機能を 1 つの例に結合してみましょう。

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 は、React 用の強力で柔軟な状態管理ライブラリであり、永続性、ミドルウェア、計算ストア、タイムトラベル、DevTools に対するすぐに使えるサポートを提供します。シンプルな API と幅広い機能により、小規模なアプリケーションと大規模なアプリケーションの両方に適しています。