هوک سفارشی ماشین حالت در ری‌اکت: تسلط بر انتزاع منطق حالت پیچیده

با افزایش پیچیدگی اپلیکیشن‌های ری‌اکت، مدیریت حالت می‌تواند به یک چالش بزرگ تبدیل شود. رویکردهای سنتی با استفاده از `useState` و `useEffect` می‌توانند به سرعت منجر به منطق درهم‌تنیده و کدی با نگهداری دشوار شوند، به‌ویژه هنگام کار با انتقال‌های حالت و عوارض جانبی پیچیده. اینجاست که ماشین‌های حالت، و به‌طور خاص هوک‌های سفارشی ری‌اکت که آن‌ها را پیاده‌سازی می‌کنند، به کمک می‌آیند. این مقاله شما را با مفهوم ماشین‌های حالت آشنا می‌کند، نحوه پیاده‌سازی آن‌ها به عنوان هوک‌های سفارشی در ری‌اکت را نشان می‌دهد و مزایایی را که برای ساخت اپلیکیشن‌های مقیاس‌پذیر و قابل نگهداری برای مخاطبان جهانی ارائه می‌دهند، تشریح می‌کند.

ماشین حالت چیست؟

یک ماشین حالت (یا ماشین حالت متناهی، FSM) یک مدل محاسباتی ریاضی است که رفتار یک سیستم را با تعریف تعداد محدودی از حالت‌ها و انتقال‌ها بین آن حالت‌ها توصیف می‌کند. آن را مانند یک فلوچارت در نظر بگیرید، اما با قوانین سخت‌گیرانه‌تر و تعریفی رسمی‌تر. مفاهیم کلیدی عبارتند از:

• حالت‌ها (States): شرایط یا فازهای مختلف سیستم را نشان می‌دهند.
• انتقال‌ها (Transitions): تعریف می‌کنند که سیستم چگونه بر اساس رویدادها یا شرایط خاص از یک حالت به حالت دیگر حرکت می‌کند.
• رویدادها (Events): محرک‌هایی که باعث انتقال حالت می‌شوند.
• حالت اولیه (Initial State): حالتی که سیستم در آن شروع به کار می‌کند.

ماشین‌های حالت در مدل‌سازی سیستم‌هایی با حالت‌های کاملاً تعریف‌شده و انتقال‌های واضح، برتری دارند. نمونه‌های فراوانی در سناریوهای دنیای واقعی وجود دارد:

• چراغ‌های راهنمایی: بین حالت‌هایی مانند قرمز، زرد، سبز با انتقال‌هایی که توسط تایمرها فعال می‌شوند، جابجا می‌شوند. این یک مثال قابل تشخیص جهانی است.
• پردازش سفارش: یک سفارش تجارت الکترونیک ممکن است از حالت‌هایی مانند «در انتظار»، «در حال پردازش»، «ارسال شده» و «تحویل داده شده» عبور کند. این مورد به طور جهانی برای خرده‌فروشی آنلاین کاربرد دارد.
• جریان احراز هویت: یک فرآیند احراز هویت کاربر می‌تواند شامل حالت‌هایی مانند «خارج شده»، «در حال ورود»، «وارد شده» و «خطا» باشد. پروتکل‌های امنیتی به طور کلی در کشورهای مختلف سازگار هستند.

چرا از ماشین‌های حالت در ری‌اکت استفاده کنیم؟

ادغام ماشین‌های حالت در کامپوننت‌های ری‌اکت شما چندین مزیت قانع‌کننده را ارائه می‌دهد:

• سازماندهی بهتر کد: ماشین‌های حالت یک رویکرد ساختاریافته را برای مدیریت حالت اعمال می‌کنند و کد شما را قابل پیش‌بینی‌تر و فهم آن را آسان‌تر می‌کنند. دیگر خبری از کد اسپاگتی نیست!
• کاهش پیچیدگی: با تعریف صریح حالت‌ها و انتقال‌ها، می‌توانید منطق پیچیده را ساده کرده و از عوارض جانبی ناخواسته جلوگیری کنید.
• قابلیت تست‌پذیری پیشرفته: ماشین‌های حالت ذاتاً قابل تست هستند. شما به راحتی می‌توانید با تست کردن هر حالت و انتقال، صحت رفتار سیستم خود را تأیید کنید.
• افزایش قابلیت نگهداری: ماهیت اعلانی ماشین‌های حالت، اصلاح و گسترش کد را با تکامل اپلیکیشن شما آسان‌تر می‌کند.
• تجسم بهتر: ابزارهایی وجود دارند که می‌توانند ماشین‌های حالت را به تصویر بکشند و یک نمای کلی از رفتار سیستم شما ارائه دهند که به همکاری و درک بین تیم‌هایی با مهارت‌های متنوع کمک می‌کند.

پیاده‌سازی یک ماشین حالت به عنوان هوک سفارشی در ری‌اکت

بیایید نحوه پیاده‌سازی یک ماشین حالت را با استفاده از یک هوک سفارشی ری‌اکت نشان دهیم. ما یک مثال ساده از یک دکمه ایجاد خواهیم کرد که می‌تواند در سه حالت باشد: `idle`، `loading`، و `success`. دکمه در حالت `idle` شروع می‌شود. هنگامی که کلیک می‌شود، به حالت `loading` منتقل می‌شود، یک فرآیند بارگذاری را شبیه‌سازی می‌کند (با استفاده از `setTimeout`)، و سپس به حالت `success` منتقل می‌شود.

۱. تعریف ماشین حالت

ابتدا، حالت‌ها و انتقال‌های ماشین حالت دکمه خود را تعریف می‌کنیم:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // پس از ۲ ثانیه، به حالت success منتقل شو
      },
    },
    success: {},
  },
};

این پیکربندی از یک رویکرد مستقل از کتابخانه (اگرچه الهام گرفته از XState) برای تعریف ماشین حالت استفاده می‌کند. ما منطق تفسیر این تعریف را خودمان در هوک سفارشی پیاده‌سازی خواهیم کرد. خاصیت `initial` حالت اولیه را روی `idle` تنظیم می‌کند. خاصیت `states` حالت‌های ممکن (`idle`، `loading` و `success`) و انتقال‌های آن‌ها را تعریف می‌کند. حالت `idle` دارای یک خاصیت `on` است که یک انتقال به حالت `loading` را هنگام وقوع رویداد `CLICK` تعریف می‌کند. حالت `loading` از خاصیت `after` برای انتقال خودکار به حالت `success` پس از ۲۰۰۰ میلی‌ثانیه (۲ ثانیه) استفاده می‌کند. حالت `success` در این مثال یک حالت پایانی است.

۲. ایجاد هوک سفارشی

حالا، بیایید هوک سفارشی را که منطق ماشین حالت را پیاده‌سازی می‌کند، ایجاد کنیم:

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); // پاک‌سازی هنگام unmount یا تغییر حالت
      });
    }
  }, [currentState, stateMachineDefinition.states]);

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

export default useStateMachine;

این هوک `useStateMachine` تعریف ماشین حالت را به عنوان آرگومان می‌گیرد. از `useState` برای مدیریت حالت فعلی و context (بعداً context را توضیح خواهیم داد) استفاده می‌کند. تابع `transition` یک رویداد را به عنوان آرگومان می‌گیرد و حالت فعلی را بر اساس انتقال‌های تعریف شده در تعریف ماشین حالت به‌روز می‌کند. هوک `useEffect` خاصیت `after` را مدیریت می‌کند و تایمرهایی را برای انتقال خودکار به حالت بعدی پس از مدت زمان مشخص تنظیم می‌کند. این هوک حالت فعلی، context و تابع `transition` را برمی‌گرداند.

۳. استفاده از هوک سفارشی در یک کامپوننت

در نهایت، بیایید از هوک سفارشی در یک کامپوننت ری‌اکت استفاده کنیم:

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

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // پس از ۲ ثانیه، به حالت 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` باشد) ارسال می‌کند. کامپوننت بر اساس حالت فعلی متن متفاوتی را رندر می‌کند. دکمه در حین بارگذاری غیرفعال می‌شود تا از کلیک‌های متعدد جلوگیری شود.

مدیریت Context در ماشین‌های حالت

در بسیاری از سناریوهای دنیای واقعی، ماشین‌های حالت نیاز به مدیریت داده‌هایی دارند که در طول انتقال حالت‌ها باقی می‌مانند. این داده‌ها context نامیده می‌شوند. Context به شما امکان می‌دهد اطلاعات مربوطه را با پیشرفت ماشین حالت ذخیره و به‌روز کنید.

بیایید مثال دکمه خود را گسترش دهیم تا یک شمارنده را شامل شود که هر بار که دکمه با موفقیت بارگذاری می‌شود، افزایش می‌یابد. ما تعریف ماشین حالت و هوک سفارشی را برای مدیریت context اصلاح خواهیم کرد.

۱. به‌روزرسانی تعریف ماشین حالت

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

ما یک خاصیت `context` با مقدار اولیه `count` برابر با ۰ به تعریف ماشین حالت اضافه کرده‌ایم. همچنین یک اکشن `entry` به حالت `success` اضافه کرده‌ایم. اکشن `entry` زمانی اجرا می‌شود که ماشین حالت وارد حالت `success` می‌شود. این اکشن context فعلی را به عنوان آرگومان می‌گیرد و یک context جدید با `count` افزایش یافته برمی‌گرداند. `entry` در اینجا نمونه‌ای از تغییر context را نشان می‌دهد. از آنجایی که اشیاء جاوا اسکریپت با ارجاع منتقل می‌شوند، مهم است که به جای تغییر شیء اصلی، یک شیء *جدید* برگردانید.

۲. به‌روزرسانی هوک سفارشی

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); // پاک‌سازی هنگام unmount یا تغییر حالت
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

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

export default useStateMachine;

ما هوک `useStateMachine` را به‌روز کرده‌ایم تا حالت `context` را با `stateMachineDefinition.context` یا یک شیء خالی در صورت عدم ارائه context، مقداردهی اولیه کند. همچنین یک `useEffect` برای مدیریت اکشن `entry` اضافه کرده‌ایم. هنگامی که حالت فعلی یک اکشن `entry` دارد، ما آن را اجرا کرده و context را با مقدار بازگشتی به‌روز می‌کنیم.

۳. استفاده از هوک به‌روز شده در یک کامپوننت

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` در کامپوننت دسترسی داریم و آن را نمایش می‌دهیم. هر بار که دکمه با موفقیت بارگذاری می‌شود، شمارنده افزایش می‌یابد.

مفاهیم پیشرفته ماشین حالت

در حالی که مثال ما نسبتاً ساده است، ماشین‌های حالت می‌توانند سناریوهای بسیار پیچیده‌تری را مدیریت کنند. در اینجا برخی از مفاهیم پیشرفته برای در نظر گرفتن آورده شده است:

• گاردها (Guards): شرایطی که باید برای وقوع یک انتقال برآورده شوند. به عنوان مثال، یک انتقال ممکن است تنها در صورتی مجاز باشد که کاربر احراز هویت شده باشد یا اگر یک مقدار داده خاص از یک آستانه فراتر رود.
• اکشن‌ها (Actions): عوارض جانبی که هنگام ورود یا خروج از یک حالت اجرا می‌شوند. اینها می‌توانند شامل فراخوانی API، به‌روزرسانی DOM یا ارسال رویدادها به کامپوننت‌های دیگر باشند.
• حالت‌های موازی (Parallel States): به شما امکان می‌دهد سیستم‌هایی با چندین فعالیت همزمان را مدل‌سازی کنید. به عنوان مثال، یک پخش‌کننده ویدیو ممکن است یک ماشین حالت برای کنترل‌های پخش (پخش، مکث، توقف) و دیگری برای مدیریت کیفیت ویدیو (پایین، متوسط، بالا) داشته باشد.
• حالت‌های سلسله مراتبی (Hierarchical States): به شما امکان می‌دهد حالت‌ها را درون حالت‌های دیگر تودرتو کنید و یک سلسله مراتب از حالت‌ها ایجاد کنید. این می‌تواند برای مدل‌سازی سیستم‌های پیچیده با بسیاری از حالت‌های مرتبط مفید باشد.

کتابخانه‌های جایگزین: XState و بیشتر

در حالی که هوک سفارشی ما یک پیاده‌سازی اولیه از یک ماشین حالت را ارائه می‌دهد، چندین کتابخانه عالی وجود دارند که می‌توانند فرآیند را ساده کرده و ویژگی‌های پیشرفته‌تری را ارائه دهند.

XState

XState یک کتابخانه محبوب جاوا اسکریپت برای ایجاد، تفسیر و اجرای ماشین‌های حالت و statechartها است. این کتابخانه یک API قدرتمند و انعطاف‌پذیر برای تعریف ماشین‌های حالت پیچیده، از جمله پشتیبانی از گاردها، اکشن‌ها، حالت‌های موازی و حالت‌های سلسله مراتبی را فراهم می‌کند. XState همچنین ابزارهای عالی برای تجسم و اشکال‌زدایی ماشین‌های حالت ارائه می‌دهد.

کتابخانه‌های دیگر

گزینه‌های دیگر عبارتند از:

• Robot: یک کتابخانه مدیریت حالت سبک با تمرکز بر سادگی و عملکرد.
• react-automata: کتابخانه‌ای که به طور خاص برای ادغام ماشین‌های حالت در کامپوننت‌های ری‌اکت طراحی شده است.

انتخاب کتابخانه به نیازهای خاص پروژه شما بستگی دارد. XState انتخاب خوبی برای ماشین‌های حالت پیچیده است، در حالی که Robot و react-automata برای سناریوهای ساده‌تر مناسب هستند.

بهترین شیوه‌ها برای استفاده از ماشین‌های حالت

برای استفاده مؤثر از ماشین‌های حالت در اپلیکیشن‌های ری‌اکت خود، بهترین شیوه‌های زیر را در نظر بگیرید:

• کوچک شروع کنید: با ماشین‌های حالت ساده شروع کنید و به تدریج پیچیدگی را در صورت نیاز افزایش دهید.
• ماشین حالت خود را تجسم کنید: از ابزارهای تجسم برای به دست آوردن درک روشنی از رفتار ماشین حالت خود استفاده کنید.
• تست‌های جامع بنویسید: هر حالت و انتقال را به طور کامل تست کنید تا از صحت رفتار سیستم خود اطمینان حاصل کنید.
• ماشین حالت خود را مستند کنید: حالت‌ها، انتقال‌ها، گاردها و اکشن‌های ماشین حالت خود را به وضوح مستند کنید.
• بین‌المللی‌سازی (i18n) را در نظر بگیرید: اگر اپلیکیشن شما مخاطبان جهانی را هدف قرار می‌دهد، اطمینان حاصل کنید که منطق ماشین حالت و رابط کاربری شما به درستی بین‌المللی شده‌اند. به عنوان مثال، از ماشین‌های حالت جداگانه یا context برای مدیریت فرمت‌های مختلف تاریخ یا نمادهای ارز بر اساس منطقه کاربر استفاده کنید.
• دسترس‌پذیری (a11y): اطمینان حاصل کنید که انتقال‌های حالت و به‌روزرسانی‌های UI شما برای کاربران دارای معلولیت قابل دسترس هستند. از ویژگی‌های ARIA و HTML معنایی برای ارائه زمینه و بازخورد مناسب به فناوری‌های کمکی استفاده کنید.

نتیجه‌گیری

هوک‌های سفارشی ری‌اکت همراه با ماشین‌های حالت، یک رویکرد قدرتمند و مؤثر برای مدیریت منطق حالت پیچیده در اپلیکیشن‌های ری‌اکت ارائه می‌دهند. با انتزاع انتقال‌های حالت و عوارض جانبی در یک مدل کاملاً تعریف‌شده، می‌توانید سازماندهی کد را بهبود بخشید، پیچیدگی را کاهش دهید، قابلیت تست‌پذیری را افزایش دهید و قابلیت نگهداری را بالا ببرید. چه هوک سفارشی خود را پیاده‌سازی کنید یا از کتابخانه‌ای مانند XState استفاده کنید، گنجاندن ماشین‌های حالت در گردش کار ری‌اکت شما می‌تواند به طور قابل توجهی کیفیت و مقیاس‌پذیری اپلیکیشن‌های شما را برای کاربران در سراسر جهان بهبود بخشد.