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', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

ഈ കോൺഫിഗറേഷൻ സ്റ്റേറ്റ് മെഷീൻ നിർവചിക്കാൻ ലൈബ്രറി-അജ്ഞേയമായ (എങ്കിലും XState-ൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ടത്) ഒരു സമീപനം ഉപയോഗിക്കുന്നു. കസ്റ്റം ഹുക്കിൽ ഈ നിർവചനം വ്യാഖ്യാനിക്കുന്നതിനുള്ള ലോജിക് നമ്മൾ തന്നെ നടപ്പിലാക്കും. `initial` പ്രോപ്പർട്ടി പ്രാരംഭ സ്റ്റേറ്റ് `idle` ആയി സജ്ജമാക്കുന്നു. `states` പ്രോപ്പർട്ടി സാധ്യമായ സ്റ്റേറ്റുകളും (`idle`, `loading`, കൂടാതെ `success`) അവയുടെ ട്രാൻസിഷനുകളും നിർവചിക്കുന്നു. `idle` സ്റ്റേറ്റിന് ഒരു `CLICK` ഇവന്റ് സംഭവിക്കുമ്പോൾ `loading` സ്റ്റേറ്റിലേക്ക് മാറാൻ സഹായിക്കുന്ന ഒരു `on` പ്രോപ്പർട്ടി ഉണ്ട്. `loading` സ്റ്റേറ്റ് 2000 ​​മില്ലിസെക്കൻഡിന് ശേഷം (`success`) സ്റ്റേറ്റിലേക്ക് സ്വയമേവ മാറാൻ `after` പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. `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); // Cleanup on unmount or state change
      });
    }
  }, [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', // After 2 seconds, transition to 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 };
      },
    },
  },
};

തുടക്കത്തിൽ `count` എന്ന മൂല്യമുള്ള ഒരു `context` പ്രോപ്പർട്ടി ഞങ്ങൾ സ്റ്റേറ്റ് മെഷീൻ നിർവചനത്തിലേക്ക് ചേർത്തു. കൂടാതെ `success` സ്റ്റേറ്റിലേക്ക് ഒരു `entry` ആക്ഷനും ചേർത്തിട്ടുണ്ട്. `entry` ആക്ഷൻ സ്റ്റേറ്റ് മെഷീൻ `success` എന്ന സ്റ്റേറ്റിൽ പ്രവേശിക്കുമ്പോൾ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു. ഇത് നിലവിലെ സന്ദർഭം ഒരു ആർഗ്യുമെന്റായി എടുക്കുകയും `count` വർദ്ധിപ്പിച്ച ഒരു പുതിയ സന്ദർഭം നൽകുകയും ചെയ്യുന്നു. ഇവിടെ നൽകിയിട്ടുള്ള `entry` സന്ദർഭം എങ്ങനെ മാറ്റാമെന്നുള്ളതിന് ഒരു ഉദാഹരണമാണ്. ജാവ സ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റുകൾ റഫറൻസ് വഴിയാണ് കൈമാറുന്നത് എന്നതുകൊണ്ട്, യഥാർത്ഥ ഒബ്ജക്റ്റിനെ മാറ്റുന്നതിനുപകരം ഒരു *പുതിയ* ഒബ്ജക്റ്റ് നൽകേണ്ടത് പ്രധാനമാണ്.

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); // Cleanup on unmount or state change
      });
    }
  }, [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 അപ്‌ഡേറ്റ് ചെയ്യുകയോ അല്ലെങ്കിൽ മറ്റ് ഘടകങ്ങളിലേക്ക് ഇവന്റുകൾ അയയ്ക്കുകയോ ചെയ്യുന്നത് ഇതിൽ ഉൾപ്പെടാം.
• സമാന്തര സ്റ്റേറ്റുകൾ: ഒന്നിലധികം സമകാലിക പ്രവർത്തനങ്ങളുള്ള സിസ്റ്റങ്ങൾ മോഡൽ ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു വീഡിയോ പ്ലെയറിന് പ്ലേബാക്ക് നിയന്ത്രണങ്ങൾക്കായി (play, pause, stop) ഒരു സ്റ്റേറ്റ് മെഷീനും, വീഡിയോ നിലവാരം കൈകാര്യം ചെയ്യുന്നതിന് (low, medium, high) മറ്റൊന്നും ഉണ്ടാകാം.
• ശ്രേണിപരമായ സ്റ്റേറ്റുകൾ: മറ്റ് സ്റ്റേറ്റുകളിൽ സ്റ്റേറ്റുകൾ ഉൾപ്പെടുത്താൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, അതുവഴി സ്റ്റേറ്റുകളുടെ ഒരു ശ്രേണി ഉണ്ടാക്കുന്നു. നിരവധി ബന്ധപ്പെട്ട സ്റ്റേറ്റുകളുള്ള സങ്കീർണ്ണമായ സിസ്റ്റങ്ങൾ മോഡൽ ചെയ്യാൻ ഇത് ഉപയോഗപ്രദമാകും.

ഇതര ലൈബ്രറികൾ: XState-ഉം മറ്റും

ഞങ്ങളുടെ കസ്റ്റം ഹുക്ക് ഒരു സ്റ്റേറ്റ് മെഷീൻ്റെ അടിസ്ഥാനപരമായ നടപ്പാക്കൽ നൽകുന്നുണ്ടെങ്കിലും, ഈ പ്രക്രിയ ലളിതമാക്കാനും കൂടുതൽ വിപുലമായ ഫീച്ചറുകൾ വാഗ്ദാനം ചെയ്യാനും കഴിയുന്ന നിരവധി മികച്ച ലൈബ്രറികൾ ഉണ്ട്.

XState

XState എന്നത് സ്റ്റേറ്റ് മെഷീനുകളും സ്റ്റേറ്റ്ചാർട്ടുകളും ഉണ്ടാക്കുന്നതിനും, വ്യാഖ്യാനിക്കുന്നതിനും, എക്സിക്യൂട്ട് ചെയ്യുന്നതിനും വേണ്ടി ഉപയോഗിക്കുന്ന ഒരു ജനപ്രിയ JavaScript ലൈബ്രറിയാണ്. സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മെഷീനുകൾ നിർവചിക്കുന്നതിന് ഇത് ശക്തവും ഫ്ലെക്സിബിളുമായ API നൽകുന്നു, ഗാർഡുകൾ, ആക്ഷനുകൾ, സമാന്തര സ്റ്റേറ്റുകൾ, ശ്രേണിപരമായ സ്റ്റേറ്റുകൾ എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു. സ്റ്റേറ്റ് മെഷീനുകൾ ദൃശ്യവൽക്കരിക്കുന്നതിനും ഡീബഗ് ചെയ്യുന്നതിനും XState മികച്ച ടൂളുകളും വാഗ്ദാനം ചെയ്യുന്നു.

മറ്റ് ലൈബ്രറികൾ

മറ്റ് ഓപ്ഷനുകളിൽ ഇവ ഉൾപ്പെടുന്നു:

• Robot: ലാളിത്യത്തിലും പ്രകടനത്തിലും ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്ന ഒരു നേരിയ സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറി.
• react-automata: React ഘടകങ്ങളിൽ സ്റ്റേറ്റ് മെഷീനുകൾ സംയോജിപ്പിക്കുന്നതിനായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്ത ഒരു ലൈബ്രറി.

ലൈബ്രറിയുടെ തിരഞ്ഞെടുക്കൽ നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ ആവശ്യകതകളെ ആശ്രയിച്ചിരിക്കുന്നു. സങ്കീർണ്ണമായ സ്റ്റേറ്റ് മെഷീനുകൾക്കായി XState ഒരു നല്ല തിരഞ്ഞെടുപ്പാണ്, അതേസമയം ലളിതമായ സാഹചര്യങ്ങളിൽ Robot-ഉം react-automata-യും അനുയോജ്യമാണ്.

സ്റ്റേറ്റ് മെഷീനുകൾ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

നിങ്ങളുടെ React ആപ്ലിക്കേഷനുകളിൽ സ്റ്റേറ്റ് മെഷീനുകൾ ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, താഴെ പറയുന്ന മികച്ച രീതികൾ പരിഗണിക്കുക:

• ചെറുതായി ആരംഭിക്കുക: ലളിതമായ സ്റ്റേറ്റ് മെഷീനുകളിൽ ആരംഭിച്ച് ആവശ്യാനുസരണം സങ്കീർണ്ണത വർദ്ധിപ്പിക്കുക.
• നിങ്ങളുടെ സ്റ്റേറ്റ് മെഷീൻ ദൃശ്യവൽക്കരിക്കുക: നിങ്ങളുടെ സ്റ്റേറ്റ് മെഷീൻ്റെ സ്വഭാവത്തെക്കുറിച്ച് വ്യക്തമായ ധാരണ നേടുന്നതിന് വിഷ്വലൈസേഷൻ ടൂളുകൾ ഉപയോഗിക്കുക.
• സമഗ്രമായ ടെസ്റ്റുകൾ എഴുതുക: നിങ്ങളുടെ സിസ്റ്റം ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ ഓരോ സ്റ്റേറ്റും ട്രാൻസിഷനും നന്നായി പരീക്ഷിക്കുക.
• നിങ്ങളുടെ സ്റ്റേറ്റ് മെഷീൻ രേഖപ്പെടുത്തുക: നിങ്ങളുടെ സ്റ്റേറ്റ് മെഷീൻ്റെ സ്റ്റേറ്റുകൾ, ട്രാൻസിഷനുകൾ, ഗാർഡുകൾ, ആക്ഷനുകൾ എന്നിവ വ്യക്തമായി രേഖപ്പെടുത്തുക.
• അന്താരാഷ്ട്രവൽക്കരണം (i18n) പരിഗണിക്കുക: നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ഒരു ലോകளாவശ്രേണിയിലുള്ള പ്രേക്ഷകരെ ലക്ഷ്യമിടുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ സ്റ്റേറ്റ് മെഷീൻ ലോജിക്കും യൂസർ ഇന്റർഫേസും ശരിയായി അന്താരാഷ്ട്രവൽക്കരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, ഉപയോക്താവിൻ്റെ ലൊക്കേലിനെ അടിസ്ഥാനമാക്കി വ്യത്യസ്ത തീയതി ഫോർമാറ്റുകളോ കറൻസി ചിഹ്നങ്ങളോ കൈകാര്യം ചെയ്യാൻ പ്രത്യേക സ്റ്റേറ്റ് മെഷീനുകളോ സന്ദർഭമോ ഉപയോഗിക്കുക.
• പ്രവേശനക്ഷമത (a11y): നിങ്ങളുടെ സ്റ്റേറ്റ് ട്രാൻസിഷനുകളും UI അപ്‌ഡേറ്റുകളും വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് എളുപ്പത്തിൽ ലഭ്യമാക്കുക. സഹായക സാങ്കേതികവിദ്യകൾക്ക് ശരിയായ സന്ദർഭവും പ്രതികരണവും നൽകുന്നതിന് ARIA ആട്രിബ്യൂട്ടുകളും സെമാൻ്റിക് HTML-ഉം ഉപയോഗിക്കുക.

ഉപസംഹാരം

React കസ്റ്റം ഹുക്കുകളും സ്റ്റേറ്റ് മെഷീനുകളും React ആപ്ലിക്കേഷനുകളിൽ സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ലോജിക് കൈകാര്യം ചെയ്യുന്നതിന് ശക്തവും ഫലപ്രദവുമായ ഒരു സമീപനം നൽകുന്നു. സ്റ്റേറ്റ് ട്രാൻസിഷനുകളും സൈഡ് ഇഫക്റ്റുകളും നന്നായി നിർവചിക്കപ്പെട്ട ഒരു മോഡലിലേക്ക് മാറ്റുന്നതിലൂടെ, നിങ്ങൾക്ക് കോഡ് ഓർഗനൈസേഷൻ മെച്ചപ്പെടുത്താനും, സങ്കീർണ്ണത കുറയ്ക്കാനും, ടെസ്റ്റബിലിറ്റി വർദ്ധിപ്പിക്കാനും, ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്കായി നിങ്ങളുടെ ആപ്ലിക്കേഷനുകളുടെ നിലവാരവും സ്കേലബിളിറ്റിയും വർദ്ധിപ്പിക്കാനും കഴിയും.