Angular Academy · درس

الكيانات والميزات المخصصة

أدر المجموعات باستخدام withEntities

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

إدارة المجموعات

تُعد قوائم السجلات، مثل المهام والمستخدمين والمنتجات، شائعةً جدًا، ولذلك يوفّر NgRx‏ withEntities لإدارتها باستخدام حالة مطبّعة ودوال تحديث جاهزة.

withEntities

تخزّن withEntities العناصر بحسب المعرّف في entityMap، إلى جانب مصفوفة ids مرتبة، وتعرض إشارةً محسوبة entities للقائمة.

import { withEntities } from '@ngrx/signals/entities';

export const TodoStore = signalStore(
  withEntities<Todo>()
);
// store.entities() -> Todo[]

محدّثات الكيانات

استخدموا مساعدات التحديث مع patchState: setAllEntities وaddEntity وupdateEntity وremoveEntity. فهي تحافظ على اتساق الخريطة وترتيب المعرّفات.

import { addEntity, removeEntity, updateEntity } from '@ngrx/signals/entities';

patchState(store, addEntity({ id: '1', title: 'A', done: false }));
patchState(store, updateEntity({ id: '1', changes: { done: true } }));
patchState(store, removeEntity('1'));

تحميل مجموعة

استبدلوا المجموعة بأكملها بعد الجلب باستخدام setAllEntities، الذي يطبّع المصفوفة إلى خريطة ومعرّفات.

import { setAllEntities } from '@ngrx/signals/entities';

load: rxMethod<void>(pipe(
  switchMap(() => api.getTodos()),
  tap(todos => patchState(store, setAllEntities(todos)))
))

مفتاح idKey مخصص

إذا لم يكن معرّف الكيان هو id، فمرّروا محدِّدًا. وسيستخدم المتجر ذلك الحقل كمفتاح للخريطة.

withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));

الاشتقاق من الكيانات

اجمعوا withEntities مع withComputed لإنشاء نماذج قراءة مفلترة أو محسوبة العدد فوق المجموعة.

withComputed(({ entities }) => ({
  remaining: computed(() => entities().filter(t => !t.done).length)
}))

ما هي الميزة المخصصة

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

import { signalStoreFeature, withState } from '@ngrx/signals';

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false })
  );
}

إعادة استخدام ميزة

أضيفوا ميزتكم المخصصة إلى أي متجر كما تضيفون ميزة مضمّنة. وهذه هي الطريقة لمشاركة الاهتمامات المشتركة مثل علامات التحميل أو ترقيم الصفحات.

export const TodoStore = signalStore(
  withLoading(),
  withEntities<Todo>()
);
// store.loading() now exists

ميزات تتضمن طرائق

يمكن أن تتضمن الميزة المخصصة withMethods لعرض سلوك قابل لإعادة الاستخدام، مثل مساعدات setLoading.

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false }),
    withMethods((store) => ({
      setLoading(loading: boolean) { patchState(store, { loading }); }
    }))
  );
}

قابلية التركيب

بما أن الميزات ليست سوى دوال تعيد أوصاف الميزات، يمكنكم تكديس العديد منها: withLoading() وwithEntities()، إلى جانب حالة خاصة بالتطبيق، لتندمج جميعًا في متجر واحد ذي أنواع محددة بقوة.

ميزات عامة

اجعل الميزات عامة لتعمل عبر أنواع الكيانات المختلفة. تنتقل معلمات النوع عبرها، وبذلك يحافظ المستهلكون على أمان النوع الكامل.

export function withSelected<T>() {
  return signalStoreFeature(
    withState({ selected: null as T | null })
  );
}

تحقق سريع

اختبر معرفتك بالكيانات والميزات.

مراجعة

أدرتَ المجموعات باستخدام withEntities (خريطة مُطبَّعة، ودوال مساعدة للتحديث، ونماذج قراءة مشتقة)، وبنيت حِزماً عامة قابلة لإعادة الاستخدام باستخدام signalStoreFeature لمشاركة الحالة والقيم المحسوبة والأساليب عبر المتاجر.

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

هل درس «الكيانات والميزات المخصصة» مجاني؟

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

ماذا ستتعلم في «الكيانات والميزات المخصصة»؟

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

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

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

كم من الوقت يستغرق درس «الكيانات والميزات المخصصة»؟

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

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

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

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

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