13 سبتمبر 2025العربية

استكشف useActionState في React مع آلات الحالات لبناء واجهات مستخدم قوية ويمكن التنبؤ بسلوكها. تعلم منطق انتقال حالة الإجراء للتطبيقات المعقدة.

آلة حالات React useActionState: إتقان منطق انتقال حالة الإجراء

يُعد useActionState من React خطافًا (hook) قويًا تم تقديمه في React 19 (حاليًا في إصدار canary) وهو مصمم لتبسيط تحديثات الحالة غير المتزامنة، خاصة عند التعامل مع إجراءات الخادم. عند دمجه مع آلة الحالات، فإنه يوفر طريقة أنيقة وقوية لإدارة تفاعلات واجهة المستخدم المعقدة وانتقالات الحالة. ستتعمق هذه المقالة في كيفية الاستفادة بفعالية من useActionState مع آلة الحالات لبناء تطبيقات React قابلة للتنبؤ والصيانة.

ما هي آلة الحالات؟

آلة الحالات هي نموذج رياضي للحوسبة يصف سلوك نظام ما بعدد محدود من الحالات والانتقالات بين تلك الحالات. تمثل كل حالة شرطًا مميزًا للنظام، وتمثل الانتقالات الأحداث التي تتسبب في انتقال النظام من حالة إلى أخرى. فكر في الأمر كمخطط تدفقي ولكن بقواعد أكثر صرامة حول كيفية التنقل بين الخطوات.

يقدم استخدام آلة الحالات في تطبيق React الخاص بك العديد من الفوائد:

القابلية للتنبؤ: تفرض آلات الحالات تدفقًا واضحًا ويمكن التنبؤ به للتحكم، مما يسهل فهم سلوك تطبيقك.
قابلية الصيانة: من خلال فصل منطق الحالة عن عرض واجهة المستخدم، تعمل آلات الحالات على تحسين تنظيم الكود وتسهيل صيانة وتحديث تطبيقك.
قابلية الاختبار: آلات الحالات قابلة للاختبار بطبيعتها لأنه يمكنك بسهولة تحديد السلوك المتوقع لكل حالة وانتقال.
التمثيل المرئي: يمكن تمثيل آلات الحالات بصريًا، مما يساعد في توصيل سلوك التطبيق للمطورين الآخرين أو أصحاب المصلحة.

تقديم `useActionState`

يسمح لك خطاف 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 });

في هذا المثال:

الوسيط الأول هو دالة غير متزامنة تنفذ الإجراء. تتلقى الحالة السابقة وبيانات النموذج (إن وجدت).
الوسيط الثاني هو الحالة الأولية.
يعيد الخطاف مصفوفة تحتوي على الحالة الحالية ودالة إرسال (dispatch).

الجمع بين `useActionState` وآلات الحالات

تأتي القوة الحقيقية من الجمع بين useActionState وآلة الحالات. يتيح لك ذلك تحديد انتقالات الحالة المعقدة التي ت déclencherها الإجراءات غير المتزامنة. لننظر في سيناريو: مكون تجارة إلكترونية بسيط يجلب تفاصيل المنتج.

مثال: جلب تفاصيل المنتج

سنحدد الحالات التالية لمكون تفاصيل المنتج لدينا:

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 لإدارة انتقالات الحالة بناءً على آلتنا.
نستخدم خطاف useEffect من React لتشغيل جلب البيانات عندما تكون الحالة 'loading'.
تقوم دالة handleFetch بإرسال حدث '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();

        // تم الجلب بنجاح - أرسل SUCCESS مع البيانات!
        dispatch('SUCCESS');

       // احفظ البيانات التي تم جلبها في الحالة المحلية. لا يمكن استخدام dispatch داخل الـ reducer.
       newState.data = data; // تحديث خارج المرسل

      } catch (error) {
        // حدث خطأ - أرسل 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` مع آلات الحالات

فصل واضح للمسؤوليات: يتم تغليف منطق الحالة داخل آلة الحالات، بينما يتم التعامل مع عرض واجهة المستخدم بواسطة مكون React.
تحسين قابلية قراءة الكود: توفر آلة الحالات تمثيلاً مرئيًا لسلوك التطبيق، مما يسهل فهمه وصيانته.
تبسيط التعامل غير المتزامن: يبسط useActionState التعامل مع الإجراءات غير المتزامنة، مما يقلل من الكود المتكرر.
تعزيز قابلية الاختبار: آلات الحالات قابلة للاختبار بطبيعتها، مما يتيح لك التحقق بسهولة من صحة سلوك تطبيقك.

مفاهيم واعتبارات متقدمة

تكامل 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) أمرًا ضروريًا. تأكد من أن منطق آلة الحالات وعرض واجهة المستخدم مدولان بشكل صحيح لدعم لغات وسياقات ثقافية متعددة. ضع في اعتبارك ما يلي:

المحتوى النصي: استخدم مكتبات i18n لترجمة المحتوى النصي بناءً على لغة المستخدم.
تنسيقات التاريخ والوقت: استخدم مكتبات تنسيق التاريخ والوقت المدركة للموقع لعرض التواريخ والأوقات بالتنسيق الصحيح لمنطقة المستخدم.
تنسيقات العملة: استخدم مكتبات تنسيق العملات المدركة للموقع لعرض قيم العملات بالتنسيق الصحيح لمنطقة المستخدم.
تنسيقات الأرقام: استخدم مكتبات تنسيق الأرقام المدركة للموقع لعرض الأرقام بالتنسيق الصحيح لمنطقة المستخدم (على سبيل المثال، فواصل عشرية، فواصل الآلاف).
تخطيط من اليمين إلى اليسار (RTL): دعم تخطيطات RTL للغات مثل العربية والعبرية.

من خلال النظر في جوانب i18n هذه، يمكنك التأكد من أن تطبيقك متاح وسهل الاستخدام لجمهور عالمي.

الخاتمة

يقدم الجمع بين useActionState من React وآلات الحالات نهجًا قويًا لبناء واجهات مستخدم قوية ويمكن التنبؤ بسلوكها. من خلال فصل منطق الحالة عن عرض واجهة المستخدم وفرض تدفق واضح للتحكم، تعمل آلات الحالات على تحسين تنظيم الكود وقابلية الصيانة وقابلية الاختبار. بينما لا يزال useActionState ميزة قادمة، فإن فهم كيفية دمج آلات الحالات الآن سيعدك للاستفادة من فوائدها عندما تصبح متاحة. توفر مكتبات مثل XState قدرات إدارة حالة أكثر تقدمًا، مما يسهل التعامل مع منطق التطبيقات المعقدة.

من خلال تبني آلات الحالات وuseActionState، يمكنك رفع مستوى مهاراتك في تطوير React وبناء تطبيقات أكثر موثوقية وقابلية للصيانة وسهولة في الاستخدام للمستخدمين في جميع أنحاء العالم.

آلة حالات React useActionState: إتقان منطق انتقال حالة الإجراء

ما هي آلة الحالات؟

تقديم useActionState

الجمع بين useActionState وآلات الحالات