إنشاء SignalStore
عرّف الحالة باستخدام signalStore وwithState
إنشاء SignalStore درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
ما هو SignalStore
يُعد SignalStore من NgRx حلًا خفيفًا لإدارة الحالة، مبنيًا على إشارات Angular. ويمكنكم تركيب المتجر من ميزات مثل withState وwithComputed وwithMethods.
التثبيت
يوجد SignalStore ضمن حزمة @ngrx/signals. أضيفوه إلى مشروع Angular، ثم استوردوا اللبنات الأساسية التي تحتاجون إليها.
// terminal
// ng add @ngrx/signals
import { signalStore, withState } from '@ngrx/signals';دالة signalStore
تعيد signalStore() فئة قابلة للحقن. مرّروا إليها الميزات التي تصف الحالة والسلوك. ويُوفَّر المتجر في الجذر افتراضيًا.
export const CounterStore = signalStore(
{ providedIn: 'root' },
withState({ count: 0 })
);withState
تحدّد withState(initial) الحالة الابتدائية. وتصبح كل خاصية من المستوى الأعلى إشارةً في المتجر، لذلك تكون store.count إشارةً تستدعونها بصيغة store.count().
withState({
count: 0,
user: null as User | null,
items: [] as Item[]
});حقن المتجر
بما أن الدالة تعيد فئة قابلة للحقن، يمكنكم حقنها مثل أي خدمة وقراءة إشارات حالتها في القوالب.
@Component({
template: '<p>{{ store.count() }}</p>'
})
export class CounterComponent {
store = inject(CounterStore);
}patchState
حدّثوا حالة SignalStore باستخدام المساعد patchState. فهو يقبل المتجر، إلى جانب كائنات حالة جزئية أو دوال تحديث، ويطبّقها بطريقة ثابتة.
import { patchState } from '@ngrx/signals';
patchState(store, { count: 5 });
patchState(store, (s) => ({ count: s.count + 1 }));شرائح الحالة كإشارات
يُعرَض كل مفتاح من مفاتيح الحالة كإشارة مستقلة. ولا تربطكم قراءة شريحة واحدة بالشرائح الأخرى، كما لا تُحدَّث القوالب إلا للشرائح التي تقرؤها.
// given withState({ count: 0, name: '' })
store.count(); // number signal
store.name(); // string signalتحديد نوع الحالة
حدّدوا نوع حالتكم صراحةً للحقول القابلة للقيمة الفارغة أو حقول المصفوفات، حتى يستنتج SignalStore أنواع الإشارات الصحيحة. استخدموا عمليات التحويل as في الكائن الابتدائي.
type State = { user: User | null; loading: boolean };
withState<State>({ user: null, loading: false });التوفير المحلي مقابل التوفير في الجذر
احذفوا providedIn لإنشاء متجر ضمن نطاق المكوّن، وأضيفوا المتجر إلى providers الخاص بالمكوّن. ويمنح ذلك كل مثيل من المكوّن حالته المعزولة الخاصة.
@Component({
providers: [CounterStore]
})
export class WidgetComponent {
store = inject(CounterStore);
}تركيب الميزات
تكمن قوة SignalStore في التركيب: أدرجوا عدة ميزات، وستندمج في متجر واحد. ويهم الترتيب لأن الميزات اللاحقة يمكنها قراءة الميزات السابقة.
export const TodoStore = signalStore(
withState({ todos: [] as Todo[] })
// withComputed(...), withMethods(...) added next
);دون تعليمات نمطية كثيرة
على خلاف NgRx التقليدي بأسلوب Redux (الإجراءات والمخفِّضات والتأثيرات والمحدِّدات)، يجمع SignalStore الحالة والمنطق في متجر تصريحي واحد مع تعليمات نمطية أقل بكثير.
اختبار سريع
تحققوا من أساسيات SignalStore لديكم.
مراجعة
أنشأتم SignalStore باستخدام signalStore() وwithState، وقرأتم شرائح الحالة كإشارات، وحدّثتموها بطريقة ثابتة عبر patchState، واخترتم بين المتاجر الموفَّرة في الجذر والمتاجر ضمن نطاق المكوّن. التالي: القيم المحسوبة والطرائق.
الأسئلة الشائعة
هل درس «إنشاء SignalStore» مجاني؟
نعم — نص درس «إنشاء SignalStore» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «إنشاء SignalStore»؟
عرّف الحالة باستخدام signalStore وwithState تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «إنشاء SignalStore»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.