Angular Academy · درس

rxMethod للعمل غير المتزامن

تعامل مع التدفقات غير المتزامنة باستخدام rxMethod

rxMethod للعمل غير المتزامن درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

العمليات غير المتزامنة في SignalStore

تكون العديد من الإجراءات غير متزامنة، مثل تحميل البيانات والبحث مع التأخير والاستقصاء. ويوفّر SignalStore‏ rxMethod لإدارة هذه التدفقات التفاعلية غير المتزامنة والقابلة للإلغاء.

أساسيات rxMethod

تنشئ rxMethod طريقةً مدعومة بخط أنابيب من RxJS. وتستدعونها بقيمة، أو بإشارة/‏Observable، فتدفع هذه القيمة إلى التدفق.

import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

withMethods((store, api = inject(Api)) => ({
  load: rxMethod<string>(pipe(
    switchMap(id => api.getById(id)),
    tap(item => patchState(store, { current: item }))
  ))
}))

استدعاء rxMethod

استدعوا الطريقة مثل أي طريقة عادية باستخدام قيمة بسيطة. وتدخل القيمة إلى خط الأنابيب الذي حدّدتموه.

store.load('42');

تمرير إشارة

يمكنكم تمرير إشارة إلى rxMethod. وسيُعاد تشغيل خط الأنابيب تلقائيًا كلما تغيّرت تلك الإشارة، مما يجعلها مناسبة تمامًا لعمليات التحميل التفاعلية.

selectedId = signal('1');
ngOnInit() {
  this.store.load(this.selectedId); // reloads when selectedId changes
}

يُلغي switchMap العمل القديم

يعني استخدام switchMap أن الإصدار الجديد يلغي الطلب السابق الجاري تنفيذه. ويمنع ذلك حالات التسابق التي قد تستبدل فيها استجابة قديمة وبطيئة استجابةً أحدث.

تتبّع حالة التحميل

طبّقوا علامة تحميل في البداية وأزيلوها عند الاكتمال، حتى تتمكن واجهة المستخدم من عرض مؤشرات التحميل.

load: rxMethod<string>(pipe(
  tap(() => patchState(store, { loading: true })),
  switchMap(id => api.getById(id).pipe(
    tap(item => patchState(store, { current: item, loading: false }))
  ))
))

معالجة الأخطاء

يجب معالجة الأخطاء داخل خط الأنابيب، وإلا يكتمل التدفق وتتوقف الطريقة عن العمل. استخدموا catchError داخل Observable الداخلي.

switchMap(id => api.getById(id).pipe(
  tap(item => patchState(store, { current: item, error: null })),
  catchError(err => {
    patchState(store, { error: err.message, loading: false });
    return EMPTY;
  })
))

بحث مع تأخير

ركّبوا معاملات مرتبطة بالزمن لتنفيذ البحث أثناء الكتابة. ويطبّق خط الأنابيب التأخير والتبديل كما في RxJS العادي.

search: rxMethod<string>(pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => api.search(q)),
  tap(results => patchState(store, { results }))
))

اختيار معامل التسطيح

استخدموا switchMap لإلغاء العمل القديم، وconcatMap لوضعه في قائمة انتظار، وmergeMap للتنفيذ المتوازي، وexhaustMap لتجاهل الاستدعاءات الجديدة أثناء الانشغال. اختاروا المعامل وفق التزامن المطلوب.

التنظيف التلقائي

يرتبط اشتراك خط الأنابيب بدورة حياة المتجر. وعند تدمير المتجر (إذا كان ضمن نطاق المكوّن)، يُنهى التدفق، فلا تحدث تسربات ولا تكون هناك حاجة إلى إلغاء اشتراك يدوي.

التهيئة عند الإنشاء

اجمعوا rxMethod مع ميزة withHooks لتشغيل تحميل أولي عند إنشاء المتجر.

withHooks({
  onInit(store) { store.load('initial'); }
})

اختبار سريع

تحققوا من معرفتكم بـ rxMethod.

مراجعة

استخدمتم rxMethod للتدفقات غير المتزامنة: الاستدعاء بقيم أو إشارات، واختيار معامل تسطيح (switchMap لإلغاء العمل القديم)، وتتبع التحميل، ومعالجة الأخطاء باستخدام catchError، والاعتماد على التنظيف التلقائي للاشتراكات.

الأسئلة الشائعة

هل درس «rxMethod للعمل غير المتزامن» مجاني؟

نعم — نص درس «rxMethod للعمل غير المتزامن» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «rxMethod للعمل غير المتزامن»؟

تعامل مع التدفقات غير المتزامنة باستخدام rxMethod تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «rxMethod للعمل غير المتزامن»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy