React कस्टम हूक स्टेट मशीन: कॉम्प्लेक्स स्टेट लॉजिक ॲबस्ट्रॅक्शनमध्ये प्रभुत्व मिळवा

React ॲप्लिकेशन्स जसजसे अधिक क्लिष्ट होत जातात, तसतसे स्टेट्स मॅनेज करणे हे एक मोठे आव्हान बनू शकते. `useState` आणि `useEffect` वापरून पारंपारिक दृष्टिकोन लवकरच गुंतागुंतीचे लॉजिक आणि देखरेख करण्यास कठीण कोडकडे घेऊन जाऊ शकतात, विशेषतः क्लिष्ट स्टेट ट्रान्झिशन आणि साईड इफेक्ट्स हाताळताना. इथेच स्टेट मशीन, आणि विशेषतः त्यांना लागू करणारे React कस्टम हूक मदतीला येतात. हा लेख तुम्हाला स्टेट मशीनच्या संकल्पनेतून मार्गदर्शन करेल, React मध्ये कस्टम हूक म्हणून ते कसे लागू करायचे हे दर्शवेल आणि जागतिक प्रेक्षकांसाठी स्केलेबल आणि मेन्टेन करण्यायोग्य ॲप्लिकेशन्स तयार करण्यासाठी ते देत असलेल्या फायद्यांचे स्पष्टीकरण देईल.

स्टेट मशीन म्हणजे काय?

स्टेट मशीन (किंवा फायनाईट स्टेट मशीन, FSM) ही गणनेची एक गणितीय मॉडेल आहे जी सिस्टमचे वर्तन परिभाषित करते, मर्यादित संख्येने स्टेट्स आणि त्या स्टेट्समधील ट्रान्झिशन्स परिभाषित करून. याला फ्लोचार्टसारखे समजा, परंतु अधिक कठोर नियम आणि अधिक औपचारिक व्याख्येसह. मुख्य संकल्पनांमध्ये हे समाविष्ट आहे:

• स्टेट्स: सिस्टमच्या विविध परिस्थिती किंवा टप्पे दर्शवतात.
• ट्रान्झिशन्स: विशिष्ट घटना किंवा परिस्थितींवर आधारित सिस्टम एका स्टेटमधून दुसऱ्या स्टेटमध्ये कशी हलते हे परिभाषित करतात.
• इव्हेंट्स: स्टेट ट्रान्झिशन्स घडवणारे ट्रिगर.
• इनिशियल स्टेट: सिस्टम ज्या स्टेटमध्ये सुरू होते.

स्टेट मशीन सु-परिभाषित स्टेट्स आणि स्पष्ट ट्रान्झिशन्स असलेल्या सिस्टम्सचे मॉडेलिंग करण्यात उत्कृष्ट आहेत. वास्तविक-जगातील अनेक उदाहरणे आहेत:

• ट्रॅफिक लाइट्स: टायमरद्वारे ट्रिगर होणाऱ्या ट्रान्झिशन्ससह, लाल, पिवळा, हिरवा या स्टेट्समधून फिरतात. हे जागतिक स्तरावर ओळखले जाणारे उदाहरण आहे.
• ऑर्डर प्रोसेसिंग: ई-कॉमर्स ऑर्डर 'Pending', 'Processing', 'Shipped', आणि 'Delivered' यांसारख्या स्टेट्समधून जाऊ शकते. हे ऑनलाइन रिटेलवर सार्वत्रिकपणे लागू होते.
• ऑथेंटिकेशन फ्लो: युझर ऑथेंटिकेशन प्रक्रियेमध्ये 'Logged Out', 'Logging In', 'Logged In', आणि 'Error' यांसारख्या स्टेट्सचा समावेश असू शकतो. सुरक्षा प्रोटोकॉल साधारणपणे देशांमध्ये सातत्यपूर्ण असतात.

React मध्ये स्टेट मशीन का वापरावी?

तुमच्या React कंपोनंट्समध्ये स्टेट मशीन समाकलित केल्याने अनेक आकर्षक फायदे मिळतात:

• सुधारित कोड ऑर्गनायझेशन: स्टेट मशीन स्टेट मॅनेजमेंटसाठी एक संरचित दृष्टिकोन लागू करते, ज्यामुळे तुमचा कोड अधिक अंदाजित आणि समजण्यास सोपा होतो. आता स्पॅगेटी कोड नाही!
• कमी झालेली कॉम्प्लेक्सिटी: स्टेट्स आणि ट्रान्झिशन्स स्पष्टपणे परिभाषित करून, तुम्ही कॉम्प्लेक्स लॉजिक सोपे करू शकता आणि अनपेक्षित साईड इफेक्ट्स टाळू शकता.
• वाढवलेली टेस्टेबिलिटी: स्टेट मशीन अंतर्भूतपणे टेस्टेबल आहेत. प्रत्येक स्टेट आणि ट्रान्झिशनची चाचणी करून तुम्ही तुमची सिस्टम योग्यरित्या कार्य करते की नाही हे सहजपणे सत्यापित करू शकता.
• वाढवलेली मेन्टेनॅबिलिटी: स्टेट मशीनचे डिक्लेरेटिव्ह स्वरूप तुमच्या ॲप्लिकेशनच्या उत्क्रांतीनुसार तुमचा कोड सुधारणे आणि वाढवणे सोपे करते.
• चांगले व्हिज्युअलायझेशन: स्टेट मशीनचे व्हिज्युअलायझेशन करू शकणारी साधने उपलब्ध आहेत, ज्यामुळे तुमच्या सिस्टमच्या वर्तनाची स्पष्ट माहिती मिळते, ज्यामुळे विविध कौशल्ये असलेल्या टीम्समध्ये सहयोग आणि समज वाढते.

React कस्टम हूक म्हणून स्टेट मशीन लागू करणे

चला, React कस्टम हूक वापरून स्टेट मशीन कसे लागू करायचे हे स्पष्ट करूया. आपण एका बटणाचे एक साधे उदाहरण तयार करू जे तीन स्टेट्समध्ये असू शकते: `idle`, `loading`, आणि `success`. बटण `idle` स्टेटमध्ये सुरू होते. क्लिक केल्यावर, ते `loading` स्टेटमध्ये ट्रान्झिशन होते, लोडिंग प्रक्रिया सिम्युलेट करते (`setTimeout` वापरून), आणि नंतर `success` स्टेटमध्ये ट्रान्झिशन होते.

1. स्टेट मशीन परिभाषित करा

प्रथम, आपण आपल्या बटण स्टेट मशीनचे स्टेट्स आणि ट्रान्झिशन्स परिभाषित करूया:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // 2 सेकंदांनंतर, success कडे ट्रान्झिशन करा
      },
    },
    success: {},
  },
};

हे कॉन्फिगरेशन स्टेट मशीन परिभाषित करण्यासाठी लायब्ररी-अज्ञेयवादी (जरी XState पासून प्रेरित) दृष्टिकोन वापरते. आपण कस्टम हूकमध्ये ही परिभाषा स्वतःच समजून घेण्याचे लॉजिक लागू करू. `initial` प्रॉपर्टी प्रारंभिक स्टेट `idle` वर सेट करते. `states` प्रॉपर्टी संभाव्य स्टेट्स (`idle`, `loading`, आणि `success`) आणि त्यांचे ट्रान्झिशन्स परिभाषित करते. `idle` स्टेटमध्ये `on` प्रॉपर्टी आहे जी `CLICK` इव्हेंट घडल्यास `loading` स्टेटमध्ये ट्रान्झिशन परिभाषित करते. `loading` स्टेट `after` प्रॉपर्टी वापरून 2000 मिलिसेकंद (2 सेकंद) नंतर आपोआप `success` स्टेटमध्ये ट्रान्झिशन करते. `success` स्टेट या उदाहरणात एक टर्मिनल स्टेट आहे.

2. कस्टम हूक तयार करा

आता, स्टेट मशीन लॉजिक लागू करणारे कस्टम हूक तयार करूया:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // अनमाउंट किंवा स्टेट बदलल्यावर क्लीनअप करा
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

हे `useStateMachine` हूक स्टेट मशीन परिभाषा आर्ग्युमेंट म्हणून घेते. हे चालू स्टेट आणि कॉन्टेक्स्ट मॅनेज करण्यासाठी `useState` वापरते (आपण कॉन्टेक्स्ट नंतर स्पष्ट करू). `transition` फंक्शन इव्हेंट आर्ग्युमेंट म्हणून घेते आणि स्टेट मशीन डेफिनिशनमध्ये परिभाषित ट्रान्झिशन्सवर आधारित चालू स्टेट अपडेट करते. `useEffect` हूक `after` प्रॉपर्टी हाताळते, निर्दिष्ट वेळेनंतर आपोआप पुढील स्टेटमध्ये ट्रान्झिशन करण्यासाठी टाइमर सेट करते. हूक चालू स्टेट, कॉन्टेक्स्ट आणि `transition` फंक्शन रिटर्न करते.

3. कंपोनंटमध्ये कस्टम हूक वापरा

शेवटी, React कंपोनंटमध्ये कस्टम हूक वापरूया:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // 2 सेकंदांनंतर, success कडे ट्रान्झिशन करा
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

हा कंपोनंट बटणाची स्टेट मॅनेज करण्यासाठी `useStateMachine` हूक वापरतो. `handleClick` फंक्शन बटण क्लिक केल्यावर `CLICK` इव्हेंट डिस्पॅच करते (आणि फक्त जर ते `idle` स्टेटमध्ये असेल तर). कंपोनंट चालू स्टेटनुसार भिन्न टेक्स्ट रेंडर करते. एकाधिक क्लिक टाळण्यासाठी बटण लोड होत असताना अक्षम केले जाते.

कॉन्टेक्स्ट हाताळणे स्टेट मशीनमध्ये

अनेक वास्तविक-जगातील परिस्थितीत, स्टेट मशीनला डेटा मॅनेज करण्याची आवश्यकता असते जो स्टेट ट्रान्झिशन्स दरम्यान टिकून राहतो. या डेटाला कॉन्टेक्स्ट म्हणतात. कॉन्टेक्स्ट तुम्हाला स्टेट मशीन प्रगती करत असताना संबंधित माहिती साठवण्याची आणि अपडेट करण्याची परवानगी देते.

चला, आपण बटण यशस्वीरित्या लोड होते प्रत्येक वेळी वाढणारा काउंटर समाविष्ट करण्यासाठी आपले बटण उदाहरण विस्तारित करूया. आपण स्टेट मशीन परिभाषा आणि कॉन्टेक्स्ट हाताळण्यासाठी कस्टम हूक अद्यतनित करू.

1. स्टेट मशीन परिभाषा अद्यतनित करा

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

आपण 0 च्या प्रारंभिक `count` मूल्यासह स्टेट मशीन डेफिनिशनमध्ये `context` प्रॉपर्टी जोडली आहे. आपण `success` स्टेटमध्ये `entry` ॲक्शन देखील जोडली आहे. `entry` ॲक्शन स्टेट मशीन `success` स्टेटमध्ये प्रवेश करते तेव्हा कार्यान्वित होते. ती चालू कॉन्टेक्स्टला आर्ग्युमेंट म्हणून घेते आणि `count` वाढलेल्या नवीन कॉन्टेक्स्ट रिटर्न करते. `entry` इथे कॉन्टेक्स्ट सुधारित करण्याचे एक उदाहरण दाखवते. कारण JavaScript ऑब्जेक्ट्स रेफरन्सद्वारे पास केले जातात, मूळ ऑब्जेक्टमध्ये बदल करण्याऐवजी *नवीन* ऑब्जेक्ट रिटर्न करणे महत्त्वाचे आहे.

2. कस्टम हूक अद्यतनित करा

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // अनमाउंट किंवा स्टेट बदलल्यावर क्लीनअप करा
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

आपण `useStateMachine` हूक `stateMachineDefinition.context` किंवा कॉन्टेक्स्ट प्रदान न केल्यास रिक्त ऑब्जेक्ट वापरून `context` स्टेट इनिशियलाइझ करण्यासाठी अद्यतनित केले आहे. आपण `entry` ॲक्शन हाताळण्यासाठी `useEffect` देखील जोडले आहे. जेव्हा चालू स्टेटमध्ये `entry` ॲक्शन असते, तेव्हा आपण ती कार्यान्वित करतो आणि रिटर्न केलेल्या मूल्याने कॉन्टेक्स्ट अद्यतनित करतो.

3. अपडेटेड हूक कंपोनंटमध्ये वापरा

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

आपण आता कंपोनंटमध्ये `context.count` ॲक्सेस करतो आणि ते प्रदर्शित करतो. बटण यशस्वीरित्या लोड होते प्रत्येक वेळी, काउंटर वाढेल.

ऍडव्हान्स्ड स्टेट मशीन संकल्पना

जरी आपले उदाहरण तुलनेने सोपे असले तरी, स्टेट मशीन खूप क्लिष्ट परिस्थिती हाताळू शकते. विचार करण्यासाठी येथे काही ऍडव्हान्स्ड संकल्पना आहेत:

• गार्ड्स: ट्रान्झिशन घडण्यासाठी पूर्ण होणाऱ्या अटी. उदाहरणार्थ, एखादा युझर ऑथेंटिकेटेड असेल किंवा विशिष्ट डेटा मूल्य एका थ्रेशोल्डपेक्षा जास्त असेल तरच एक ट्रान्झिशनला परवानगी दिली जाऊ शकते.
• ॲक्शन्स: स्टेटमध्ये प्रवेश करताना किंवा बाहेर पडताना कार्यान्वित होणारे साईड इफेक्ट्स. यामध्ये API कॉल्स करणे, DOM अपडेट करणे किंवा इतर कंपोनंट्सना इव्हेंट डिस्पॅच करणे समाविष्ट असू शकते.
• पॅरलल स्टेट्स: तुम्हाला अनेक समवर्ती क्रियाकलापांसह सिस्टम्सचे मॉडेल करण्याची परवानगी देतात. उदाहरणार्थ, व्हिडिओ प्लेयरमध्ये प्लेबॅक कंट्रोल्स (प्ले, पॉज, स्टॉप) साठी एक स्टेट मशीन आणि व्हिडिओची गुणवत्ता (लो, मीडियम, हाय) व्यवस्थापित करण्यासाठी दुसरे असू शकते.
• हायरार्किकल स्टेट्स: तुम्हाला स्टेट्सला इतर स्टेट्समध्ये नेस्ट करण्याची परवानगी देते, ज्यामुळे स्टेट्सचा एक हायरार्की तयार होतो. अनेक संबंधित स्टेट्स असलेल्या क्लिष्ट सिस्टम्सचे मॉडेलिंग करण्यासाठी हे उपयुक्त ठरू शकते.

पर्यायी लायब्ररीज: XState आणि बरेच काही

जरी आमचे कस्टम हूक स्टेट मशीनची मूलभूत अंमलबजावणी प्रदान करते, तरीही अनेक उत्कृष्ट लायब्ररीज प्रक्रिया सुलभ करू शकतात आणि अधिक ऍडव्हान्स्ड वैशिष्ट्ये देऊ शकतात.

XState

XState ही स्टेट मशीन आणि स्टेट चार्ट्स तयार करण्यासाठी, इंटरप्रिट करण्यासाठी आणि कार्यान्वित करण्यासाठी एक लोकप्रिय JavaScript लायब्ररी आहे. हे गार्ड्स, ॲक्शन्स, पॅरलल स्टेट्स आणि हायरार्किकल स्टेट्ससह क्लिष्ट स्टेट मशीन परिभाषित करण्यासाठी एक शक्तिशाली आणि लवचिक API प्रदान करते. XState स्टेट मशीन व्हिज्युअलायझेशन आणि डीबगिंगसाठी उत्कृष्ट साधने देखील ऑफर करते.

इतर लायब्ररीज

इतर पर्यायांमध्ये हे समाविष्ट आहे:

• Robot: साधेपणा आणि कार्यक्षमतेवर लक्ष केंद्रित करणारे एक लाइटवेट स्टेट मॅनेजमेंट लायब्ररी.
• react-automata: React कंपोनंट्समध्ये स्टेट मशीन समाकलित करण्यासाठी खास डिझाइन केलेले लायब्ररी.

लायब्ररीची निवड तुमच्या प्रोजेक्टच्या विशिष्ट गरजांवर अवलंबून असते. क्लिष्ट स्टेट मशीनसाठी XState एक चांगला पर्याय आहे, तर Robot आणि react-automata साध्या परिस्थितींसाठी योग्य आहेत.

स्टेट मशीन वापरण्यासाठी सर्वोत्तम पद्धती

तुमच्या React ॲप्लिकेशन्समध्ये स्टेट मशीनचा प्रभावीपणे फायदा घेण्यासाठी, खालील सर्वोत्तम पद्धतींचा विचार करा:

• लहान सुरुवात करा: सोप्या स्टेट मशीनने सुरुवात करा आणि आवश्यकतेनुसार हळूहळू कॉम्प्लेक्सिटी वाढवा.
• तुमची स्टेट मशीन व्हिज्युअलाइज करा: तुमच्या स्टेट मशीनच्या वर्तनाची स्पष्ट समज मिळवण्यासाठी व्हिज्युअलायझेशन साधनांचा वापर करा.
• संपूर्ण टेस्ट्स लिहा: तुमची सिस्टम योग्यरित्या कार्य करते याची खात्री करण्यासाठी प्रत्येक स्टेट आणि ट्रान्झिशनची कसून चाचणी घ्या.
• तुमची स्टेट मशीन डॉक्युमेंट करा: तुमच्या स्टेट मशीनचे स्टेट्स, ट्रान्झिशन्स, गार्ड्स आणि ॲक्शन्स स्पष्टपणे डॉक्युमेंट करा.
• आंतरराष्ट्रीयीकरण (i18n) विचारात घ्या: तुमचे ॲप्लिकेशन जागतिक प्रेक्षकांसाठी लक्ष्यित असल्यास, तुमच्या स्टेट मशीन लॉजिक आणि यूजर इंटरफेस योग्यरित्या आंतरराष्ट्रीयीकृत असल्याची खात्री करा. उदाहरणार्थ, युझरच्या लोकेलवर आधारित भिन्न तारीख फॉरमॅट किंवा चलन चिन्ह हाताळण्यासाठी स्वतंत्र स्टेट मशीन किंवा कॉन्टेक्स्ट वापरा.
• अ‍ॅक्सेसिबिलिटी (a11y): तुमच्या स्टेट ट्रान्झिशन्स आणि UI अपडेट्स दिव्यांग युझर्ससाठी अ‍ॅक्सेसिबल असल्याची खात्री करा. योग्य कॉन्टेक्स्ट आणि सहाय्यक तंत्रज्ञानासाठी फीडबॅक देण्यासाठी ARIA ॲट्रिब्यूट्स आणि सिमेंटिक HTML वापरा.

निष्कर्ष

React कस्टम हूक स्टेट मशीनसह एकत्रितपणे React ॲप्लिकेशन्समध्ये क्लिष्ट स्टेट लॉजिक व्यवस्थापित करण्यासाठी एक शक्तिशाली आणि प्रभावी दृष्टिकोन प्रदान करते. स्टेट ट्रान्झिशन्स आणि साईड इफेक्ट्सना सु-परिभाषित मॉडेलमध्ये ॲबस्ट्रॅक्ट करून, तुम्ही कोड ऑर्गनायझेशन सुधारू शकता, कॉम्प्लेक्सिटी कमी करू शकता, टेस्टेबिलिटी वाढवू शकता आणि मेन्टेनॅबिलिटी वाढवू शकता. तुम्ही तुमचे स्वतःचे कस्टम हूक लागू करा किंवा XState सारखी लायब्ररी वापरा, तुमच्या React वर्कफ्लोमध्ये स्टेट मशीन समाकलित केल्याने जगभरातील युझर्ससाठी तुमच्या ॲप्लिकेशन्सची गुणवत्ता आणि स्केलेबिलिटी लक्षणीयरीत्या सुधारेल.