البط NgRx | واجهات ديناميكية

تحسين تجربة التنمية

أثناء التحدث مع زملائي من شركات مختلفة ، لاحظت أن العديد من الفرق تحب NgRx. خلال مناقشاتنا ، لم يتركني الفكر:

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

هذا دفعني للبدء في استكشاف مختلف تقنيات إعادة بناء منازل Redux. شاهدت مقطع فيديو ، وقرأت مقالات ووثائق Redux. في النهاية ، كتبت البرنامج المساعد ل NgRx دعا NgRx البط

أهداف

في الأساس ، تم إنشاء ngrx-ducks لتبسيط العمل مع NgRx.

1. معالجة مبسطة باستخدام واجهة برمجة تطبيقات Decorator ، والتي تقلل من حجم الكود الذي يجب كتابته لتكوين كل من المخفض ومنشئ الإجراء. البط NgRx يولد المبدعين العمل وميزات المخفض تلقائيا.
2. دعم فني أقل ، نظرًا لأنك لست بحاجة إلى كتابة التعدادات أو أنواع الاتحادات .
3. يتم توفير منطق تطبيق أكثر وضوحًا بفضل واجهة برمجة التطبيقات (API) التي تمت كتابتها بسهولة والتي يمكنك استخدامها كخدمة عن طريق الحقن ، والتي تنشئ التفاعل مع المتجر نيابة عنك.

كيف يعمل؟

تعمل هذه المكتبة كطبقة إضافية على NgRx. فإنه يخلق تلقائيا المبدعين العمل وميزات المخفض بالنسبة لك. بالإضافة إلى ذلك ، تحصل على خدمة يمكنك استخدامها في مكوناتك. توفر هذه الخدمة واجهة برمجة التطبيقات (API) التي تمت كتابتها بشكل صارم والتي تسمح بكل من إجراءات الإرسال واختيار البيانات من وحدة التخزين.

لا تقوم مكتبة البط NgRx بتعديل سلوك NgRx الموجود. يتحكم فقط في المستودعات القابلة للملاحظة وطريقة الإرسال .

نظرًا لأن NgRx Ducks يعتمد فقط على الإرسال وحقيقة أن المستودع يوفر مراقبًا ، تظل NgRx Ducks متوافقة مع NgRx ، حتى إذا كانت هناك تغييرات مهمة في الإصدار.

تركيب

يتكامل NgRx Ducks بسلاسة مع مشروع NgRx حالي. مجرد تثبيت حزمة npm وكنت على استعداد للذهاب.

npm install @co-it/ngrx-ducks #  yarn add @co-it/ngrx-ducks 

API ديكور

الفكرة الرئيسية لـ NgRx Ducks هي الجمع بين أنواع الحركة والمنطق المتحور ( وتسمى أيضًا المخفضات ). لذلك ، تمت إضافة ديكور Ducksify لتعليق الفصل العادي.

 import { Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ initialState: 0 }) export class Counter {} 

يتيح لك الديكور تحديد الحالة الأولية لحالتك . يتيح تمرير initialState لـ NgRx Ducks إنشاء وظيفة المخفض تلقائيًا في وقت لاحق.

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

 import { Action, Ducksify } from '@co-it/ngrx-ducks'; @Ducksify<number>({ /* ... */ }) export class Counter { @Action('[Counter] Increase by passed value') increaseBy(state: number, payload: number): number { return state + payload; } } 

البط NgRx خرائط كل عمل مع منطق طفرة المقابلة. البطة تحتوي على جميع المعلومات اللازمة لإنشاء وظيفة المخفض.

وظيفة المخفض

يتم إنشاء وظائف المخفض تلقائيا باستخدام البط NgRx. يقوم المخفضمن المصنع بإنشاء جدول بحث لتعيين كل نوع من أنواع الإجراءات وفقًا لمنطق الطفرة المقابل.

 import { reducerFrom, DucksifiedAction, ... } from '@co-it/ngrx-ducks'; export function reducer( state: number, action: DucksifiedAction): number { return reducerFrom(Counter)(state, action); } 

ما زلت بحاجة إلى لف أداة تروس المخفضمن داخل الوظيفة المصدرة لتعمل بشكل صحيح مع برنامج التحويل البرمجي AoT .

يجب إضافة المخفض الذي تم إنشاؤه إلى ActionReducerMap باستخدام NgRx ( انظر المثال أدناه ).

قوة البطة!

الأكثر إثارة للاهتمام لم يأت بعد! الهدف من NgRx Ducks هو تبسيط التفاعل مع Warehouse. مع الإنشاء التلقائي لوظيفة المخفض ، كل شيء على ما يرام ، لذلك دعونا نلقي نظرة على الواجهة الديناميكية ، التي يتم إنشاؤها أيضًا هنا.

يتولى مصمم الديكور Ducksify أيضًا تسجيل بطك كخدمة في حاوية Angular IoC. هذا يعني أنه يمكنك تضمين بطة في المكون الخاص بك!

إيفاد العمل إيفاد

يضيف NgRx Ducks بعض الإصلاحات إلى Duck والتي تتيح لك استخدام استدعاءات الوظائف البسيطة بدلاً من إرسال الإجراءات يدويًا. تحصل على واجهة برمجة تطبيقات مكتوبة داخل مكوناتك.

 import { Duck } from '@co-it/ngrx-ducks'; @Component({ /* ... */ }) export class CounterComponent { constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.counter.incrementBy(42); } } 

يمكنك تنفيذ بطة ، وليس مكافحة نفسها. تقوم Duck تلقائيًا بإنشاء منشئ تصرفات لزيادة - يرسل الإجراء بالقيمة التي تم تمريرها (الحمولة النافعة). بفضل أنواع TypeScript الديناميكية ، ستحصل فورًا على الإكمال التلقائي في IDE.

باختصار ، تقوم NgRx Ducks بأتمتة العملية الكاملة لمعالجة الإجراءات. يمكنك تكوين الإجراء مرة واحدة في Duck ، وبعد ذلك يمكنك ببساطة استخدام الواجهة المكتوبة والديناميكية التي تم إنشاؤها وتحديثها تلقائيًا لك.

استرجاع البيانات من التخزين

يستخدم Duck محددات NgRx لقراءة البيانات من التخزين. كل بطة لديها اختيار المساعد الذي يقبل محدد.

دعونا نتخيل أن عدادنا مسجل كدالة NgRx مع مفتاح " عداد ". هذا سيسمح لنا بإعداد المحدد التالي.

 import { createFeatureSelector, createSelector} from '@ngrx/store'; const visitCounter = createFeatureSelector<number>('counter'); const count = createFeatureSelector<number>(count => count); @Component({ /* ... */ }) export class CounterComponent { count$: Observable<number>;constructor(@Inject(Counter) private _counter: Duck<Counter>) { this.count$ = this.counter.pick(count); this.counter.incrementBy(42); } } 

يمكنك مشاهدة العرض التوضيحي في stackblitz.io .

يسمح Duck بتحريك طفرات الحالة والاستعلام عن البيانات من المستودع. تحتاج فقط إلى خدمة "مستخدمة" واحدة ، حيث تقوم بإعداد واجهة برمجة تطبيقات ملائمة للتفاعل مع وحدة التخزين.

وأخيرا

البط NgRx يتكامل أيضا بسلاسة مع تأثيرات! لكننا سنحلل هذا بالتفصيل فقط في المقالة التالية.

إذا كنت حريصًا على معرفة ذلك الآن ، فيمكنك الرجوع إلى المثال المعقد ، والذي يتوفر أيضًا في stackblitz.io.

TL ؛ د

• البط NgRx يعمل كطبقة إضافية على قمة NgRx.
• يمكنك بسهولة دمج NgRx Ducks في المشاريع الحالية.
• بط
  .... يولد تلقائيا المبدعين العمل ووظائف المخفض
  ... يجعل إجراء العدادات وأنواع النقابات غير ضروري
  .... إنها واجهة ديناميكية يمكن تضمينها في مكون
  يوفر ... إرسال ذاتي ديناميكي ؛ إجراءات آسف
  .... يسمح بقراءة البيانات من وحدة التخزين باستخدام pick-API
  ... ... يمكن استخدامها بواسطة Effects (انظر العرض التوضيحي )

هذا كل الرجال!

آمل أن أتمكن من إقناعك بتجربة البط NgRx . أيضا ، أتساءل ما رأيك في هذه المكتبة. إذا كان لديك أي أفكار ، فما عليك سوى الكتابة على جيثب