पल्सी - रिएक्ट के लिए एक हल्के राज्य प्रबंधन पुस्तकालय

पल्सी रिएक्ट के लिए एक हल्की, लचीली और उपयोग में आसान राज्य प्रबंधन लाइब्रेरी है जो दृढ़ता, मिडलवेयर, मेमोइज़ेशन, कंप्यूटेड और कंपोज़्ड स्टोर्स, टाइम ट्रैवल और डेवटूल्स एकीकरण जैसी सुविधाएँ प्रदान करती है। यह आपको अनावश्यक जटिलता के बिना रिएक्ट अनुप्रयोगों में वैश्विक स्थिति को कुशलतापूर्वक प्रबंधित करने में मदद करता है।

विशेषताएँ

• वैश्विक राज्य प्रबंधन: एक साधारण स्टोर एपीआई का उपयोग करके घटकों में राज्य का प्रबंधन करें।
• दृढ़ता: लोकलस्टोरेज या कस्टम स्टोरेज सॉल्यूशंस में स्टोर डेटा को स्वचालित रूप से जारी रखता है।
• मिडलवेयर: मिडलवेयर फ़ंक्शंस के माध्यम से स्टोर अपडेट को संशोधित और प्रबंधित करें।
• मेमोइज़ेशन: मेमोइज़्ड स्थिति मानों का उपयोग करके अनावश्यक रेंडर से बचें।
• कंप्यूटेड स्टोर्स: मौजूदा स्टोर्स से स्थिति प्राप्त करें और गणना करें।
• कंपोज़ेबल स्टोर्स: मॉड्यूलर राज्य प्रबंधन के लिए कई स्टोर्स को एक स्टोर में संयोजित करें।
• समय-यात्रा: रिवाइंड और फॉरवर्ड स्थिति में परिवर्तन।
• DevTools एकीकरण: विकास मोड में स्थिति अपडेट को ट्रैक और डीबग करें।

इंस्टालेशन

npm install pulsy
# or
yarn add pulsy

बुनियादी उपयोग

चरण 1: पल्सी को कॉन्फ़िगर करें

स्टोर निर्माण और अपडेट के लिए 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 फ़ंक्शन का उपयोग करें। एक स्टोर वैश्विक स्थिति रखता है और इसका उपयोग आपके रिएक्ट एप्लिकेशन में कहीं भी किया जा सकता है।

import { createStore } from 'pulsy';

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

चरण 3: एक घटक में स्टोर का उपयोग करें

पल्सी आपके रिएक्ट घटकों में स्टोर के मूल्य तक पहुंचने और अपडेट करने के लिए यूज़पल्सी हुक प्रदान करता है। आइए एक काउंटर घटक बनाएं:

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;

अटलता

पल्सी लोकलस्टोरेज या किसी अन्य कस्टम स्टोरेज सिस्टम में स्टोर वैल्यू को बनाए रखना आसान बनाता है। स्टोर बनाते समय बस पर्सिस्ट विकल्प पास करें।

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

काउंटर स्टोर का मूल्य अब पेज रीलोड पर बना रहेगा।

उदाहरण: कस्टम स्टोरेज का उपयोग करना

आप पल्सी को कस्टम स्टोरेज का उपयोग करने के लिए भी कॉन्फ़िगर कर सकते हैं, जैसे सेशनस्टोरेज या कोई अन्य स्टोरेज इंजन जो स्टोरेज इंटरफ़ेस को लागू करता है:

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

यह सेशनकाउंटर को सेशनस्टोरेज में स्टोर करेगा।

मिडलवेयर

मिडिलवेयर आपको स्टोर अपडेट को प्रतिबद्ध होने से पहले रोकने और संशोधित करने की अनुमति देता है। आप स्टोर बनाते समय या बाद में addMiddleware का उपयोग करके मिडलवेयर जोड़ सकते हैं।

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

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

इस उदाहरण में, मिडलवेयर काउंटर स्टोर में प्रत्येक स्थिति परिवर्तन को लॉग करता है।

उदाहरण: एसिंक्रोनस मिडलवेयर

एपीआई कॉल जैसे एसिंक्रोनस कार्यों को संभालने के लिए पल्सी एसिंक्रोनस मिडलवेयर का समर्थन करता है:

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

इस उदाहरण में, मिडलवेयर स्टोर को अपडेट करने से पहले एक एपीआई से कुछ डेटा प्राप्त करता है।

समय-यात्रा राज्य प्रबंधन

पल्सी आपको यूज़टाइमट्रैवल हुक का उपयोग करके राज्य के इतिहास को प्रबंधित करने की अनुमति देता है, जिससे आपको राज्य परिवर्तनों को पूर्ववत करने और फिर से करने की क्षमता मिलती है।

import { useTimeTravel } from 'pulsy';

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

  return (
    

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

उदाहरण: राज्य का इतिहास प्रदर्शित करें

आप यूज़टाइमट्रैवल द्वारा प्रदान किए गए हिस्ट्रीरेफ का उपयोग करके राज्य परिवर्तनों के पूर्ण इतिहास तक पहुंच सकते हैं:

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

  return (
    

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

कंप्यूटेड स्टोर

कंप्यूटेड स्टोर अन्य स्टोर्स से अपना राज्य प्राप्त करते हैं। पल्सी आपको ऐसे स्टोर बनाने की अनुमति देता है जिनके मूल्य एक या अधिक अन्य स्टोर पर आधारित होते हैं।

import { createComputedStore } from 'pulsy';

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

यहां, जब भी काउंटर स्टोर बदलता है तो डबलकाउंटर स्वचालित रूप से अपडेट हो जाता है।

उदाहरण: एक घटक में कंप्यूटेड स्टोर प्रदर्शित करें

अब आप एक नियमित स्टोर की तरह ही कंप्यूटेड स्टोर तक पहुंच सकते हैं:

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

  return (
    

      
Double Counter: {doubleCount}
    
  );
}

रचना भंडार

पल्सी एक ही स्टोर में कई स्टोर बनाने का समर्थन करता है। यह राज्य के संबंधित हिस्सों को एक साथ समूहित करके जटिल राज्य के प्रबंधन के लिए विशेष रूप से उपयोगी है।

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

नामांकित स्टोर

संबंधित स्टोर को व्यवस्थित रखने और बड़े अनुप्रयोगों में नामकरण टकराव से बचने के लिए पल्सी आपको नामांकित स्टोर बनाने की अनुमति देता है।

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 के साथ एकीकृत होता है। जब DevTools सक्षम हो जाते हैं, तो आप अपने कंसोल में स्टोर अपडेट, स्थिति परिवर्तन और प्रदर्शन माप के बारे में लॉग देखेंगे।

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

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;

इस उदाहरण में, यूजरप्रोफाइल स्टोर कायम है, मिडलवेयर द्वारा लॉग किया गया है, और यूज़पल्सी हुक के माध्यम से पहुंच योग्य है। UserProfileComponent एक साधारण यूआई में स्टोर को प्रदर्शित और अपडेट करता है।

निष्कर्ष

पल्सी रिएक्ट के लिए एक शक्तिशाली और लचीली राज्य प्रबंधन लाइब्रेरी है जो दृढ़ता, मिडलवेयर, कंप्यूटेड स्टोर्स, टाइम-ट्रैवल और डेवटूल्स के लिए आउट-ऑफ-द-बॉक्स समर्थन प्रदान करती है। इसकी सरल एपीआई और सुविधाओं की विस्तृत श्रृंखला इसे छोटे और बड़े पैमाने के अनुप्रयोगों दोनों के लिए उपयुक्त बनाती है।