13 בספטמבר 2025עברית

גלו כיצד להשתמש ב-useActionState של React עם מכונות מצבים לבניית ממשקי משתמש חזקים וצפויים. למדו לוגיקת מעבר בין מצבי פעולה ליישומים מורכבים.

מכונת מצבים עם useActionState ב-React: שליטה בלוגיקת מעבר בין מצבי פעולה

ה-Hook useActionState של React הוא כלי רב עוצמה שהוצג ב-React 19 (כרגע בגרסת canary) ומיועד לפשט עדכוני מצב אסינכרוניים, במיוחד כאשר מתמודדים עם פעולות שרת. כאשר משלבים אותו עם מכונת מצבים, הוא מספק דרך אלגנטית וחזקה לנהל אינטראקציות UI מורכבות ומעברי מצבים. פוסט זה יעמיק בשימוש יעיל ב-useActionState עם מכונת מצבים לבניית יישומי React צפויים וקלים לתחזוקה.

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

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

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

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

היכרות עם `useActionState`

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

הנה דוגמה בסיסית לאופן השימוש ב-useActionState:


const [state, dispatch] = useActionState(async (prevState, formData) => {
  // לוגיקת הפעולה שלכם כאן
  try {
    const result = await someAsyncFunction(formData);
    return { ...prevState, data: result };
  } catch (error) {
    return { ...prevState, error: error.message };
  }
}, { data: null, error: null });

בדוגמה זו:

הארגומנט הראשון הוא פונקציה אסינכרונית המבצעת את הפעולה. היא מקבלת את המצב הקודם ואת נתוני הטופס (אם רלוונטי).
הארגומנט השני הוא המצב ההתחלתי.
ה-Hook מחזיר מערך המכיל את המצב הנוכחי ופונקציית dispatch.

שילוב `useActionState` ומכונות מצבים

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

דוגמה: הבאת פרטי מוצר

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

Idle: המצב ההתחלתי. עדיין לא נשלפו פרטי מוצר.
Loading: המצב בזמן שפרטי המוצר נשלפים.
Success: המצב לאחר שפרטי המוצר נשלפו בהצלחה.
Error: המצב אם אירעה שגיאה בעת שליפת פרטי המוצר.

אנו יכולים לייצג מכונת מצבים זו באמצעות אובייקט:


const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};

זהו ייצוג מפושט; ספריות כמו XState מספקות יישומי מכונות מצבים מתוחכמים יותר עם תכונות כמו מצבים היררכיים, מצבים מקבילים ושומרים (guards).

יישום ב-React

כעת, בואו נשלב את מכונת המצבים הזו עם useActionState ברכיב React.


import React from 'react';
// התקינו את XState אם אתם רוצים את חווית מכונת המצבים המלאה. לדוגמה בסיסית זו, נשתמש באובייקט פשוט.
// import { createMachine, useMachine } from 'xstate';

const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};


function ProductDetails({ productId }) {
  const [state, dispatch] = React.useReducer(
    (state, event) => {
      const nextState = productDetailsMachine.states[state].on[event];
      return nextState || state; // החזר את המצב הבא או את הנוכחי אם לא הוגדר מעבר
    },
    productDetailsMachine.initial
  );


  const [productData, setProductData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    if (state === 'loading') {
      const fetchData = async () => {
        try {
          const response = await fetch(`https://api.example.com/products/${productId}`); // החליפו בנקודת הקצה של ה-API שלכם
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          const data = await response.json();
          setProductData(data);
          setError(null);
          dispatch('SUCCESS');
        } catch (e) {
          setError(e.message);
          setProductData(null);
          dispatch('ERROR');
        }
      };
      fetchData();
    }
  }, [state, productId, dispatch]);

  const handleFetch = () => {
    dispatch('FETCH');
  };

  return (
    
      פרטי מוצר
      {state === 'idle' && }
      {state === 'loading' && טוען...}
      {state === 'success' && (
        
          {productData.name}
          {productData.description}
          מחיר: ${productData.price}
        
      )}
      {state === 'error' && שגיאה: {error}}
    
  );
}

export default ProductDetails;

הסבר:

אנו מגדירים את productDetailsMachine כאובייקט JavaScript פשוט המייצג את מכונת המצבים שלנו.
אנו משתמשים ב-React.useReducer כדי לנהל את מעברי המצב בהתבסס על המכונה שלנו.
אנו משתמשים ב-Hook useEffect של React כדי להפעיל את שליפת הנתונים כאשר המצב הוא 'loading'.
הפונקציה handleFetch שולחת (dispatches) את האירוע 'FETCH', ובכך מתחילה את מצב הטעינה.
הרכיב מציג תוכן שונה בהתבסס על המצב הנוכחי.

שימוש ב-`useActionState` (היפותטי - תכונה של React 19)

אף על פי ש-useActionState עדיין אינו זמין במלואו, כך ייראה היישום ברגע שיהיה זמין, ויציע גישה נקייה יותר:


import React from 'react';
//import { useActionState } from 'react'; // בטלו את ההערה כשהפיצ'ר יהיה זמין

const productDetailsMachine = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      on: {
        SUCCESS: 'success',
        ERROR: 'error',
      },
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
};

function ProductDetails({ productId }) {
  const initialState = { state: productDetailsMachine.initial, data: null, error: null };

  // יישום היפותטי של useActionState
  const [newState, dispatch] = React.useReducer(
    (state, event) => {
      const nextState = productDetailsMachine.states[state.state].on[event];
      return nextState ? { ...state, state: nextState } : state; // החזר את המצב הבא או את הנוכחי אם לא הוגדר מעבר
    },
    initialState
  );

  const handleFetchProduct = async () => {
    dispatch('FETCH');

      try {
        const response = await fetch(`https://api.example.com/products/${productId}`); // החליפו בנקודת הקצה של ה-API שלכם
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // המידע נשלף בהצלחה - בצעו dispatch ל-SUCCESS עם הנתונים!
        dispatch('SUCCESS');

       // שמרו את הנתונים שנשלפו במצב מקומי. לא ניתן להשתמש ב-dispatch בתוך ה-reducer.
       newState.data = data; // עדכון מחוץ ל-dispatcher

      } catch (error) {
        // אירעה שגיאה - בצעו dispatch ל-ERROR עם הודעת השגיאה!
        dispatch('ERROR');

         // שמרו את השגיאה במשתנה חדש שיוצג בפונקציית ה-render()
         newState.error = error.message;
      }
    //}, initialState);
  };

  return (
    
      פרטי מוצר
      {newState.state === 'idle' && }
      {newState.state === 'loading' && טוען...}
      {newState.state === 'success' && newState.data && (
        
          {newState.data.name}
          {newState.data.description}
          מחיר: ${newState.data.price}
        
      )}
      {newState.state === 'error' && newState.error && שגיאה: {newState.error}}
    
  );
}

export default ProductDetails;

הערה חשובה: דוגמה זו היא היפותטית מכיוון ש-useActionState עדיין אינו זמין במלואו וה-API המדויק שלו עשוי להשתנות. החלפתי אותו ב-useReducer הסטנדרטי כדי שהלוגיקה המרכזית תוכל לרוץ. עם זאת, הכוונה היא להראות כיצד *הייתם* משתמשים בו, במידה ויהפוך לזמין ותצטרכו להחליף את useReducer ב-useActionState. בעתיד עם useActionState, קוד זה אמור לעבוד כפי שהוסבר עם שינויים מינימליים, ויפשט מאוד את הטיפול בנתונים אסינכרוניים.

יתרונות השימוש ב-`useActionState` עם מכונות מצבים

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

מושגים מתקדמים ושיקולים

שילוב XState

לצרכי ניהול מצבים מורכבים יותר, שקלו להשתמש בספריית מכונות מצבים ייעודית כמו XState. XState מספקת מסגרת עוצמתית וגמישה להגדרה וניהול של מכונות מצבים, עם תכונות כמו מצבים היררכיים, מצבים מקבילים, שומרים (guards) ופעולות.


// דוגמה באמצעות XState
import { createMachine, useMachine } from 'xstate';

const productDetailsMachine = createMachine({
  id: 'productDetails',
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      invoke: {
        id: 'fetchProduct',
        src: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json()),
        onDone: {
          target: 'success',
          actions: assign({ product: (context, event) => event.data })
        },
        onError: {
          target: 'error',
          actions: assign({ error: (context, event) => event.data })
        }
      }
    },
    success: {
      type: 'final',
    },
    error: {
      on: {
        FETCH: 'loading',
      },
    },
  },
}, {
  services: {
    fetchProduct: (context, event) => fetch(`https://api.example.com/products/${context.productId}`).then(res => res.json())
  }
});

זה מספק דרך דקלרטיבית וחזקה יותר לנהל מצבים. הקפידו להתקין אותה באמצעות: npm install xstate

ניהול מצב גלובלי

עבור יישומים עם דרישות ניהול מצבים מורכבות על פני רכיבים מרובים, שקלו להשתמש בפתרון ניהול מצב גלובלי כמו Redux או Zustand בשילוב עם מכונות מצבים. זה מאפשר לכם לרכז את מצב היישום שלכם ולשתף אותו בקלות בין רכיבים.

בדיקת מכונות מצבים

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

הנה דוגמה פשוטה:


// דוגמת בדיקה ב-Jest
import { interpret } from 'xstate';
import { productDetailsMachine } from './productDetailsMachine';

describe('productDetailsMachine', () => {
  it('should transition from idle to loading on FETCH event', (done) => {
    const service = interpret(productDetailsMachine).onTransition((state) => {
      if (state.value === 'loading') {
        expect(state.value).toBe('loading');
        done();
      }
    });

    service.start();
    service.send('FETCH');
  });
});

בינאום (i18n)

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

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

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

סיכום

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

על ידי אימוץ מכונות מצבים ו-useActionState, תוכלו לשדרג את כישורי הפיתוח שלכם ב-React ולבנות יישומים אמינים יותר, קלים יותר לתחזוקה וידידותיים יותר למשתמשים ברחבי העולם.

מכונת מצבים עם useActionState ב-React: שליטה בלוגיקת מעבר בין מצבי פעולה

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

היכרות עם useActionState

שילוב useActionState ומכונות מצבים