מכונת מצב של וו הוק מותאם אישית של React: שליטה בהפשטת לוגיקת מצב מורכבת

ככל שיישומי React הופכים מורכבים יותר, ניהול מצב יכול להפוך לאתגר משמעותי. גישות מסורתיות המשתמשות ב-`useState` ו-`useEffect` יכולות להוביל במהירות ללוגיקה סבוכה ולקוד שקשה לתחזוקה, במיוחד כאשר מתמודדים עם מעברי מצב מסובכים ותופעות לוואי. כאן נכנסות לתמונה מכונות מצב, ובאופן ספציפי ווים מותאמים אישית של React המיישמים אותן. מאמר זה ידריך אותך דרך הקונספט של מכונות מצב, יראה כיצד ליישם אותן כווים מותאמים אישית ב-React, וידגים את היתרונות שהן מציעות לבניית יישומים מדרגיים וניתנים לתחזוקה עבור קהל גלובלי.

מהי מכונת מצב?

מכונת מצב (או מכונת מצב סופית, FSM) היא מודל חישובי מתמטי המתאר את ההתנהגות של מערכת על ידי הגדרת מספר סופי של מצבים ואת המעברים בין מצבים אלה. תחשוב על זה כמו תרשים זרימה, אבל עם כללים מחמירים יותר והגדרה פורמלית יותר. מושגי מפתח כוללים:

• מצבים: מייצגים תנאים או שלבים שונים של המערכת.
• מעברים: מגדירים כיצד המערכת עוברת ממצב אחד למשנהו בהתבסס על אירועים או תנאים ספציפיים.
• אירועים: גורמים שגורמים למעברי מצב.
• מצב התחלתי: המצב שבו המערכת מתחילה.

מכונות מצב מצטיינות במידול מערכות עם מצבים מוגדרים היטב ומעברים ברורים. דוגמאות רבות קיימות בתרחישים מהעולם האמיתי:

• רמזורים: עוברים מחזור בין מצבים כמו אדום, צהוב, ירוק, עם מעברים המופעלים על ידי טיימרים. זוהי דוגמה מוכרת גלובלית.
• עיבוד הזמנות: הזמנה של מסחר אלקטרוני עשויה לעבור בין מצבים כמו "ממתין", "מעובד", "נשלח" ו-"סופק". זה חל באופן אוניברסלי על קמעונאות מקוונת.
• זרימת אימות: תהליך אימות משתמש עשוי לכלול מצבים כמו "מנותק", "מתחבר", "מחובר" ו-"שגיאה". פרוטוקולי אבטחה עקביים בדרך כלל בין מדינות.

מדוע להשתמש במכונות מצב ב-React?

שילוב מכונות מצב ברכיבי React שלך מציע מספר יתרונות משכנעים:

• ארגון קוד משופר: מכונות מצב אוכפות גישה מובנית לניהול מצב, מה שהופך את הקוד שלך לצפוי יותר וקל יותר להבנה. אין יותר קוד ספגטי!
• מורכבות מופחתת: על ידי הגדרה מפורשת של מצבים ומעברים, אתה יכול לפשט לוגיקה מורכבת ולהימנע מתופעות לוואי לא מכוונות.
• יכולת בדיקה משופרת: מכונות מצב ניתנות לבדיקה מטבען. אתה יכול בקלות לאמת שהמערכת שלך מתנהגת כראוי על ידי בדיקת כל מצב ומעבר.
• יכולת תחזוקה מוגברת: האופי הדקלרטיבי של מכונות מצב מקל על שינוי והרחבה של הקוד שלך ככל שהיישום שלך מתפתח.
• ויזואליזציות טובות יותר: קיימים כלים שיכולים להמחיש מכונות מצב, ולספק סקירה ברורה של התנהגות המערכת שלך, המסייעים בשיתוף פעולה והבנה בין צוותים עם מערכי מיומנויות מגוונים.

יישום מכונת מצב כ-React Custom Hook

בואו נדגים כיצד ליישם מכונת מצב באמצעות React custom hook. ניצור דוגמה פשוטה של כפתור שיכול להיות בשלושה מצבים: `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) כדי להגדיר את מכונת המצב. אנו ניישם את ההיגיון לפרש את ההגדרה הזו בעצמנו ב-custom hook. המאפיין `initial` מגדיר את המצב ההתחלתי ל-`idle`. המאפיין `states` מגדיר את המצבים האפשריים (`idle`, `loading` ו-`success`) ואת המעברים שלהם. למצב `idle` יש מאפיין `on` המגדיר מעבר למצב `loading` כאשר מתרחש אירוע `CLICK`. המצב `loading` משתמש במאפיין `after` כדי לעבור אוטומטית למצב `success` לאחר 2000 מילי שניות (2 שניות). המצב `success` הוא מצב סופי בדוגמה זו.

2. צור את ה-Custom Hook

עכשיו, בואו ניצור את ה-custom hook שמיישם את לוגיקת מכונת המצב:

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` מקבלת אירוע כארגומנט ומעדכנת את המצב הנוכחי בהתבסס על המעברים המוגדרים בהגדרת מכונת המצב. ה-hook `useEffect` מטפל במאפיין `after`, ומגדיר טיימרים למעבר אוטומטי למצב הבא לאחר משך זמן מסוים. ה-hook מחזיר את המצב הנוכחי, את ההקשר ואת הפונקציה `transition`.

3. השתמש ב-Custom Hook ברכיב

לבסוף, בואו נשתמש ב-custom hook ברכיב 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` hook כדי לנהל את המצב של הכפתור. הפונקציה `handleClick` שולחת את האירוע `CLICK` כאשר לוחצים על הכפתור (ורק אם הוא במצב `idle`). הרכיב מעבד טקסט שונה בהתבסס על המצב הנוכחי. הכפתור מושבת בזמן הטעינה כדי למנוע לחיצות מרובות.

טיפול בהקשר במכונות מצב

בתרחישים רבים מהעולם האמיתי, מכונות מצב צריכות לנהל נתונים שנמשכים לאורך מעברי מצב. נתונים אלה נקראים הקשר. הקשר מאפשר לך לאחסן ולעדכן מידע רלוונטי ככל שמכונת המצב מתקדמת.

בואו נרחיב את דוגמת הכפתור שלנו כדי לכלול מונה שמגדיל בכל פעם שהכפתור נטען בהצלחה. אנו נשנה את הגדרת מכונת המצב ואת ה-custom hook כדי לטפל בהקשר.

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

הוספנו מאפיין `context` להגדרת מכונת המצב עם ערך `count` התחלתי של 0. הוספנו גם פעולת `entry` למצב `success`. פעולת `entry` מבוצעת כאשר מכונת המצב נכנסת למצב `success`. היא מקבלת את ההקשר הנוכחי כארגומנט ומחזירה הקשר חדש עם ה-`count` מוגדל. ה-`entry` כאן מציג דוגמה לשינוי ההקשר. מכיוון שאובייקטי Javascript מועברים לפי הפניה, חשוב להחזיר אובייקט *חדש* במקום לשנות את המקורי.

2. עדכן את ה-Custom Hook

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` hook כדי לאתחל את מצב ה-`context` עם `stateMachineDefinition.context` או אובייקט ריק אם לא מסופק הקשר. הוספנו גם `useEffect` לטיפול בפעולת `entry`. כאשר למצב הנוכחי יש פעולת `entry`, אנו מבצעים אותה ומעדכנים את ההקשר עם הערך המוחזר.

3. השתמשו ב-Hook המעודכן ברכיב

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 ועוד

בעוד שה-custom hook שלנו מספק יישום בסיסי של מכונת מצב, מספר ספריות מצוינות יכולות לפשט את התהליך ולהציע תכונות מתקדמות יותר.

XState

XState היא ספריית JavaScript פופולרית ליצירה, פרשנות וביצוע של מכונות מצב ו-statecharts. היא מספקת API רב עוצמה וגמיש להגדרת מכונות מצב מורכבות, כולל תמיכה בשומרים, פעולות, מצבים מקבילים ומצבים היררכיים. XState מציעה גם כלי עבודה מצוינים להדמיה וניפוי באגים של מכונות מצב.

ספריות אחרות

אפשרויות נוספות כוללות:

• Robot: ספריית ניהול מצב קלת משקל עם דגש על פשטות וביצועים.
• react-automata: ספרייה שתוכננה במיוחד לשילוב מכונות מצב ברכיבי React.

בחירת הספרייה תלויה בצרכים הספציפיים של הפרויקט שלך. XState היא בחירה טובה עבור מכונות מצב מורכבות, בעוד ש-Robot ו-react-automata מתאימות לתרחישים פשוטים יותר.

שיטות עבודה מומלצות לשימוש במכונות מצב

כדי למנף ביעילות מכונות מצב ביישומי React שלך, שקול את שיטות העבודה המומלצות הבאות:

• התחל בקטן: התחל עם מכונות מצב פשוטות והגדל בהדרגה את המורכבות לפי הצורך.
• הצג את מכונת המצב שלך: השתמש בכלים ויזואליים כדי לקבל הבנה ברורה של ההתנהגות של מכונת המצב שלך.
• כתוב בדיקות מקיפות: בדוק ביסודיות כל מצב ומעבר כדי להבטיח שהמערכת שלך מתנהגת כראוי.
• תעד את מכונת המצב שלך: תיעד בבירור את המצבים, המעברים, השומרים והפעולות של מכונת המצב שלך.
• שקול בינאום (i18n): אם היישום שלך מכוון לקהל גלובלי, ודא שלוגיקת מכונת המצב וממשק המשתמש שלך מבויימים כראוי. לדוגמה, השתמש במכונות מצב נפרדות או בהקשר כדי לטפל בתבניות תאריכים או סמלי מטבע שונים בהתבסס על אזור המשתמש.
• נגישות (a11y): ודא שמעברי המצב שלך ועדכוני ה-UI נגישים למשתמשים עם מוגבלויות. השתמש בתכונות ARIA וב-HTML סמנטי כדי לספק הקשר ומשוב נאותים לטכנולוגיות מסייעות.

סיכום

React custom hooks בשילוב עם מכונות מצב מספקים גישה רבת עוצמה ויעילה לניהול לוגיקת מצב מורכבת ביישומי React. על ידי הפשטת מעברי מצב ותופעות לוואי למודל מוגדר היטב, אתה יכול לשפר את ארגון הקוד, להפחית את המורכבות, לשפר את יכולת הבדיקה ולהגדיל את יכולת התחזוקה. בין אם אתה מיישם custom hook משלך או ממנף ספרייה כמו XState, שילוב מכונות מצב בזרימת העבודה של React שלך יכול לשפר באופן משמעותי את האיכות והמדרגיות של היישומים שלך עבור משתמשים ברחבי העולם.