الزاوي: مقدمة واضحة لـ NGRX

صورةالغرض من هذه المقالة هو إعطاء رؤية نظيفة وواضحة لـ ngrx . للقيام بذلك ، سوف أشرح ما تحتاج إلى معرفته وفهمه حول ngrx ، ثم سنراه عمليًا مع أمثلة كود بسيطة وواضحة.

فيما يلي قائمة بالموضوعات التي سنناقشها في هذه المقالة:

  • ما هو ngrx
  • فوائد استخدام ngrx
  • عيوب استخدام ngrx
  • متى تستخدم ngrx
  • الإجراءات ، علب التروس ، المحددات ، التخزين والآثار

استمرار المقال بمثال للاستخدام: "الزاوي: مثال على استخدام NGRX . "

ما هو NGRX


NGRX هي مجموعة من المكتبات "مستوحاة" من نمط Redux ، والتي بدورها "مستوحاة" من نمط Flux. ببساطة ، هذا يعني أن نموذج Redux هو نسخة مبسطة من نمط Flux ، و NGRX هو إصدار زاوي / rxjs لنموذج Redux.

ما أعنيه بنسخة "الزاوي / rxjs" من redux ... الجزء "الزاوي" هو أن ngrx هي مكتبة للاستخدام في التطبيقات الزاويّة. جزء من "rxjs" هو أن تنفيذ ngrx يعمل حول تدفق rxjs . وهذا يعني أنها تعمل باستخدام عوامل تشغيل يمكن ملاحظتها ومختلفة بواسطة rxjs.

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


دعونا نلقي نظرة على المبادئ الثلاثة لنموذج Redux ونشير إلى أهم الفوائد التي تقدمها.

المصدر الوحيد للحقيقة


في حالة بنية redux / ngrx ، هذا يعني أنه يتم تخزين حالة التطبيق بالكامل في شجرة الكائن داخل نفس المستودع.
في متجر واحد؟ سنتحدث عن المستودعات في وقت لاحق ، ولكن بالنسبة للفهم العام ، فهي مسؤولة عن الحفاظ على الدولة وتطبيق التغييرات عليها عندما يتم إخبارها عنها (عندما يتم إرسال الإجراء ، سنتحدث عنها لاحقًا).

فوائد وجود مصدر واحد للحقيقة عديدة ، ولكن بالنسبة لي الأكثر إثارة للاهتمام (لأن هذا ما سيؤثر على أي تطبيق زاوي) هو ما يلي:

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

للقراءة فقط


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

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

يتم إجراء التغييرات مع ميزات بسيطة.


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

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

الحالة في تطبيق redux لم تتغير! لذلك ، عندما يقوم المخفض بتغيير شيء ما في حالة ما ، فإنه يقوم بإرجاع كائن حالة جديد.

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

يسمح لنا هذا النهج أيضًا بالتنقل بين حالات مختلفة من حالتنا باستخدام أدوات تطوير Redux / ngrx ومعرفة ما تغير بين الحالات ومن قام بتغييرها ، من بين أمور أخرى. وبالتالي ، فإن استخدام الدالات الخالصة وإرجاع حالات الحالة الجديدة له أيضًا تأثير كبير على تصحيح الأخطاء.

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

رائع ... إذن ، ما هي فوائد استخدام NGRX؟


ذكرنا بالفعل معظمهم عندما تحدثنا عن مبادئ قالب redux. ولكن دعونا نلاحظ أهم مزايا استخدام قالب redux في التطبيق (في رأيي):

  • , , .
  • redux , .
  • , , , , ngrx rxjs, .
  • ngrx, .


  • NGRX, , . , , , . , .
  • . , - , , , , , , . () rxjs .
  • NGRX Google, , , Angular ngrx. - , , .

NGRX


وبالتالي ، من المتفق عليه بشكل عام أنه يجب استخدام ngrx في المشاريع المتوسطة / الكبيرة عندما يصبح من الصعب الحفاظ على إدارة الولاية. بعض الأشخاص المتعصبين سيقولون شيئًا مثل "إذا كان لديك ثروة ، فلديك NGRX."

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

في الوقت نفسه ، أعتقد أن فريق التطوير الزاوي القوي يمكنه أيضًا أن يقرر تضمين ngrx في الحل ، لأنهم يعرفون القوة الكاملة لقالب redux ، بالإضافة إلى القوة التي أضافها مشغلو rxjs ، ويشعرون بالراحة في العمل مع كليهما ...

إذا كنت تتوقع إجابة بسيطة ، لتحديد وقت استخدام ngrx ، لن تحصل عليه ولا تثق بأي شخص يعطيك هذه الإجابة خارج مؤسستك أو مجموعتك. يعتمد القرار على دراسة الإيجابيات والسلبيات وفهم فريقك وأخذ آرائهم في الاعتبار.

إجراءات NGRX ، وعلب التروس ، والمحددات ، والتخزين ، والتأثيرات


هذه هي لبنات البناء الأساسية لتيار ngrx. يأخذ كل منهم جزءًا من عملية بدء عملية لتغيير حالتنا والحصول على البيانات.

صورة

في الصورة نرى تيار ngrx. دعنا نشرحها ...

  1. . , , , .


    «» () . — , NGRX Action. Action' ( GetUserName):

    type (): , , . : '[User] Get User Login''.

    payload ( ): , . , . .
  2. , ( switch) , , .
    ...

    — , : . ngrx , , , , , .
  3. , - , . , - HTTP .
    ...

    ngrx , ngrx.

    Effects , - , , , , , .

    , API.

    , , (success, error ..), , ngrx.
    , ( ), «-» ( , ).
  4. . , ngrx , , .
    ...

    , , , .

    NGRX «» . , , .

    . . «store» , .

    ...

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

    وهو أيضًا صاحب حالة تطبيق.


تابع المقال مع أمثلة للاستخدام: "Angular: مثال على استخدام NGRX . "

All Articles