هذا المقال هو استمرار لمقالة "الزاوي: مقدمة تمهيدية لـ NGRX."مثال NGRX
في مثالنا ، ستكون هناك قائمة بالمستخدمين وصفحة تفاصيل المستخدم وبعض معلومات التكوين الأولية التي يجب أن تحصل عليها عند بدء التطبيق. سنقوم بتنفيذ بعض سلاسل عمليات NGRX الهامة.خطة عمل:- تركيب المكتبة
- إنشاء هيكل مجلد للتخزين
- إنشاء التخزين والقيم الأولية
- إنشاء الإجراءات
- إنشاء علب التروس (المخفضات)
- خلق تأثيرات
- إنشاء المحددات
- الإعداد النهائي
- استخدام التخزين في المكونات
لنفعلها اذا ...تركيب المكتبة
سنستخدم Angle Cli لإنشاء المشروع ، ثم سنضيف مكتبات ngrx.إنشاء مشروع:ng new angular-ngrx --style=scss
أضف مكتبات NGRX اللازمة:npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save
نقوم بتثبيت جميع مكتبات النظام البيئي ngrx تقريبًا. معظمها يصف بوضوح الغرض منها: النواة ، التخزين ، التأثيرات ، ولكن هناك زوجان قد تتساءل عن سبب الحاجة إليهما؟- store-devtools - أداة تصحيح قوية.
- جهاز التوجيه - يحفظ حالة جهاز التوجيه الزاوي في التخزين.
هيكل المجلد للتخزين
لنبدأ بمناقشة بنية ملف المستودع. يجب أن يكون هيكل الملف هذا وتكوين التخزين بالكامل موجودًا في الوحدة الرئيسية للتطبيق الخاص بك ، ولكن في مثالنا غير موجود ، وبالتالي فإن التخزين سيكون موجودًا في الوحدة الرئيسية لتطبيقنا (الخطوات هي نفسها تقريبًا إذا قمت بذلك في الوحدة الرئيسية الرئيسية).
هيكل المجلد هو تمثيل لتكوين التخزين الفعلي. سيكون لديك مجلد رئيسي باسم "store" وخمسة مجلدات فرعية تمثل كل من اللاعبين الرئيسيين في المتجر: "Actions" و "Effects" و "Redurs" و "Selectors" و "State".إنشاء التخزين والقيم الأولية
كما ذكرنا سابقًا ، سيكون لدينا قسمان رئيسيان: تطبيقنا والمستخدمون والتكوين. لكليهما ، نحتاج إلى إنشاء دولة وحالة أولية ، ونفعل الشيء نفسه لحالة التطبيق.قمنا بإنشاء واجهتين لتعريف المستخدم وتكوينه. لدينا أيضًا واحدًا لاستجابة HTTP للمستخدم ، إنه مجرد صفيف IUser.
لنبدأ بحالة المستخدم (store / state / user.state.ts):
ماذا نفعل هنا:- نقوم بإنشاء وتصدير واجهة مع هيكل بيئة المستخدم.
- نفعل نفس الشيء مع حالة المستخدم الأولية ، التي تنفذ الواجهة التي تم إنشاؤها حديثًا.
بالنسبة لحالة التكوين ، نقوم بنفس الشيء (store / states / config.state.ts):
أخيرًا ، نحتاج إلى إنشاء حالة التطبيق (store / states / app.state.ts):
- تحتوي حالة التطبيق على حالة المستخدم وتكوينه ، بالإضافة إلى حالة جهاز التوجيه.
- ثم نقوم بتعيين الحالة الأولية للتطبيق.
- أخيرًا ، يتم تصدير الوظيفة للحصول على الحالة الأولية (سنستخدمها لاحقًا).
إنشاء الإجراءات
تأكد من قراءة تعريف العمل الذي ناقشناه في المقالة السابقة .
نحتاج إلى إنشاء إجراءات للمستخدمين والإعدادات. لنبدأ بإجراءات المستخدم (store / Actions / user.actions.ts): لنستعرض
الرمز قليلاً:- Enum, . , , , .
- . Action ngrx. , , , .
- , , . , , , .
وهذا كل شيء ... إنشاء الإجراءات أمر سهل. دعنا نرى كيف تبدو إجراءات التكوين (store / Actions / config.actions.ts):
لا شيء جديد هنا ، ربما تشعر الآن بالراحة مع كل ما يحدث في هذا الملف.رائع ، لقد حددنا بالفعل الحالة والإجراءات ... فلنقم بإنشاء التروس!إنشاء علب التروس
تأكد من قراءة تعريف علب التروس التي ناقشناها في مقال سابق .
سيكون لدينا علب تروس تستجيب لبعض الإجراءات ، لأن البعض الآخر سيتم التعامل معه من خلال التأثيرات التي سننفذها لاحقًا.نحن بحاجة إلى مخفض للمستخدمين وآخر للتكوين ، ولكننا نحتاج أيضًا إلى إنشاء مخفضات التطبيق ، فلنبدأ من خلال النظر إلى مخفضات المستخدمين (store / redurs / user.reducers.ts):
دعنا نناقش التنفيذ:- يتلقى إعلان المخفض حالة ، وفي هذه الحالة ، يتخذ إجراء المستخدم ويعيد IUserState.
- باستخدام عبارة التبديل ، نقوم بإنشاء ملاحظات لكل نوع ممكن من الإجراءات.
- تُرجع كل حالة كائنًا جديدًا ، والذي ينتج عن اندماج الدولة القديمة والقيمة الجديدة.
- جميع علب التروس لها نتيجة افتراضية ، والتي ترجع ببساطة الحالة دون أي تغييرات.
وكل شيء. لن تجد أي شيء آخر في علبة التروس. دعنا نلقي نظرة على مخفضات التكوين (state / redurs / config.reducers.ts):
أخيرًا ، فلنلق نظرة على مخفضات التطبيق (المتجر):
هنا نضيف جميع المخفضات إلى خريطة مخفض التطبيق. نستخدم خريطة مخفض الإجراء للتحقق من النوع الإضافي. في وقت لاحق سنقوم بتزويد هذا التطبيق بمخفضات لوحدة المتجر.إضافة تأثيرات
تأكد من قراءة تعريف "التأثيرات" الذي ناقشناه في مقال سابق .
ربما لاحظت بالفعل أننا لا نقوم بمعالجة جميع الإجراءات في علب التروس. هذا لأننا سنتعامل مع الإجراءات الفائتة في التأثيرات ، لأن هذه الإجراءات لها آثار جانبية.لنبدأ بتأثيرات مخصصة (store / Effects / user.effects.ts):
الكثير مما يحدث في هذا الملف. دعونا نحاول شرحها:- نعلن آثارنا المخصصة باستخدام الديكور حقن.
- نعلن آثارنا باستخدام تأثيرات الديكور التي تقدمها ngrx / Effects.
- باستخدام الإجراءات المقدمة من قبل ngrx / Effects ، سنبدأ في خط أنابيب مشغلنا لهذا التأثير.
- الخطوة التالية هي تعيين نوع إجراء التأثير باستخدام عامل ofType.
- الأجزاء التالية هي عوامل تشغيل rxjs التي نستخدمها للحصول على ما نحتاج إليه (لدينا بالفعل رابط إلى وثائق rxjs في هذه المقالة).
- أخيرًا ، في البيان الأخير ، سيرسل التأثير تأثيرًا آخر.
- في المُنشئ ، نقوم بتنفيذ الخدمات التي سنستخدمها ، وإجراءات لـ ngrx / Effects ، وفي هذه الحالة أيضًا المستودع (لاحظ أن هذا عرض توضيحي ، ونحصل على المستخدم المحدد من قائمة المستخدمين في مستودعنا).
هذا هو تقريبًا نفس الهيكل الذي ستراه بأي تأثير. في هذه الحالة ، نرسل فقط إجراء ناجحًا ، ولكن يمكننا إرسال أخطاء أو أي حالة أخرى نريد معالجتها في مخفضات التطبيق لدينا.ضع في اعتبارك تأثيرات التكوين (store / Effects / config.effects.ts):
حان الوقت الآن للتحدث عن المحددات ..., .
ليس من المنطقي تكرار عينات التقطيع لحالتنا في كل مكان ، لذلك دعونا ننشئ بعض المحددات التي يمكننا إعادة استخدامها.كما هو الحال دائمًا ، فلنلقِ نظرة أولاً على محددات المستخدم (store / selectors / user.selectors.ts):
هذا أمر مفهوم حقًا لأننا لا نقوم بأي تحويلات للبيانات في محدداتنا ، ولكن ببساطة نعيد شريحة المتجر التي أشار إليها المحدد باستخدام الوظيفة CreateSelector من ngrx / store.المعلمة الأولى هي جزء من التخزين الذي سيتم استخدامه لتلقي البيانات (يمكن أن يكون مصفوفة تحتوي على عدة أجزاء من الحالة) ، والمعلمة الثانية هي وظيفة مجهولة ستقرر ما سيعود إليه المحدد.دعونا نلقي نظرة على محددات التكوين (store / selectors / config.selectors.ts):
الإعداد النهائي
حسنًا ، لقد أنشأنا كل ما يحتاجه التخزين لدينا ، ولكننا ما زلنا نفتقر إلى شيء واحد - لتجميع كل شيء معًا. سأقوم بذلك في وحدة التطبيق ، ولكن يمكنك تطبيق نفس الشيء في الوحدة الرئيسية لتطبيقك.دعنا نضيف وحدة تطبيق:
ماذا فعلنا هنا:- نحن نستورد علب التروس الخاصة بنا ونوفرها في وحدة تخزين الجذر.
- نستورد مؤثراتنا ونوفرها داخل المصفوفة في وحدة تأثيرات forRoot.
- قمنا بإعداد التكوين لوحدة الحالة لجهاز التوجيه التي توفر جهاز التوجيه stateKey.
- ونضيف أدوات مطوري المتاجر إذا كانت البيئة ليست إنتاجًا.
أول خطوتين ضروريتان ، في حين أن الخطوتين 3 و 4 أوصي بشدة ، لكنهما غير مطلوبين.انتهينا الآن أخيرًا ... يمكننا استخدام التخزين في المكونات!استخدام التخزين في بعض المكونات
نحن نقترب من النهاية! دعونا نرى كيفية استخدام التخزين لدينا ...أولاً ، دعنا نحصل على التكوين عند بدء التطبيق:
- نحن نضيف مساحة تخزين إلى app.component لدينا.
- قمنا بتعيين خاصية المكون إلى قيمة المحدد في التكوين ، لأننا نريد عرض بعض هذه المعلومات بتنسيق HTML.
- في onInit ، نرسل الإجراء للحصول على التكوين.
هذا كل شيء ... نحن بالفعل نشفر تأثيرًا سيتحكم في هذا الإجراء ، ومخفضًا سيتعامل مع هذا التأثير. بمجرد دخول المتجر إلى حالة جديدة ، سيغير المحدد قيمة ممتلكاتنا.كيفية ربط هذا بـ HTML:
بمجرد أن يكون لـ config $ قيمة ، سنراه في HTML.الآن دعنا نرى قائمة المستخدمين (الحاويات / المستخدمين / users.component.ts):
- مثلما ندير التكوين ، سنحصل على قائمة المستخدمين. أولاً ، نقوم بحقن المستودع في مكون المستخدم.
- في onInit ، نقوم بنشر إجراء لجذب المستخدمين.
- نقوم بإنشاء خاصية للمكون وتعيينه قائمة المستخدمين باستخدام محدد قائمة المستخدمين.
يبدو HTML مثل هذا:
نعرض قائمة المستخدمين في مكون العرض التقديمي ، وإرسال القائمة وربط المستخدم المحدد بوظيفة التنقل التي يمكن رؤيتها في مكون حاوية المستخدم أعلاه.دعونا نلقي نظرة على مكون الحاوية المخصص:
يتلقى هذا المكون معرف المعلمة من المسار المنشط ، ومن المحتمل أنك على دراية بالباقي ، ويرسل المعرّف كمعلمة ، ويحدد المستخدم المحدد ...إذا قمت بتصحيح التطبيق ، يمكنك رؤية أدوات المطور ، وهي بسيطة للغاية لاستخدام ... ولكن في هذه المقالة درسنا ما يكفي ، وآمل أن تتمكن من اكتشاف هذه الأدوات بسهولة.استنتاج
في هذه المقالة ، حاولت تقديم مقدمة واضحة ومفهومة لـ NGRX ، مما يوفر لك كل ما تحتاج إلى معرفته لبدء التطوير باستخدام هذه الأداة.آمل حقًا أن تساعدك المقالة على فهم نموذج الإجراء وتوصي بتنزيله واللعب قليلاً مع الرمز.