مقدمة لنمط Flux المعماري

تم تسمية Discover Functional JavaScript كأحد أفضل كتب البرمجة الوظيفية الجديدة من BookAuthority !

Flux هو نمط معماري اقترحه Facebook لبناء SPA. يقترح تقسيم التطبيق إلى الأجزاء التالية:

  • المتاجر
  • المرسل
  • الآراء
  • منشئو العمل / العمل

متجر

مخزن يدير الدولة. يمكنه تخزين كل من حالة المجال وحالة واجهة المستخدم.

المتجر والحالة مفهومان مختلفان. الدولة هي قيمة البيانات. المخزن هو كائن سلوك يدير الحالة من خلال الأساليب. في حالة إدارة الكتب: قائمة الكتب هي الحالة ويقوم متجر الكتب بإدارة تلك القائمة.

متجر يدير كائنات متعددة. إنه المصدر الوحيد للحقيقة فيما يتعلق بتلك الأشياء المحددة. يمكن أن يكون هناك العديد من المتاجر في التطبيق. على سبيل المثال: BookStore و AuthorStore و UserStore.

لا توجد طرق تعيين في المتجر. يمكنك فقط طلب تغيير الحالة عن طريق تمرير إجراء إلى المرسل.

يستمع المتجر لجميع الإجراءات ويقرر أي منها يتصرف. هذا يعني عادة switchبيان. بمجرد أن يقوم المتجر بتغيير الحالة ، سيصدر حدث تغيير. المتجر هو مصدر الحدث.

لا تأخذ المتاجر المتاجر الأخرى على أنها تبعيات.

المرسل

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

عندما يأتي إجراء ما ، سيتم تمرير هذا الإجراء إلى جميع المتاجر المسجلة.

رأي

العرض هو مكون واجهة المستخدم. وهي مسؤولة عن تقديم واجهة المستخدم والتعامل مع تفاعل المستخدم. المشاهدات في هيكل شجرة.

تستمع المشاهدات إلى تغييرات المتجر وتعيد عرضها.

يمكن تقسيم طرق العرض بشكل أكبر في طرق العرض التقديمية والحاوية.

لا تتصل طرق عرض العرض التقديمي بالمرسل أو المتاجر. يتواصلون فقط من خلال ممتلكاتهم الخاصة.

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

عرض الحاوية إجراءات الإرسال استجابة لتكرار المستخدم.

أجراءات

الإجراء عبارة عن كائن عادي يحتوي على جميع المعلومات اللازمة للقيام بهذا الإجراء.

الإجراءات لها typeخاصية تحدد نوع الإجراء.

أثناء تحرك كائنات الإجراءات حول التطبيق ، أقترح جعلها غير قابلة للتغيير.

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

منشئو العمل

الممارسة هي تغليف الكود ، وإنشاء إجراءات في الوظائف. تسمى هذه الوظائف التي تنشئ الإجراءات وترسلها باسم منشئي الإجراءات.

مكالمات واجهة برمجة تطبيقات الويب

عند إجراء مكالمات Web API لتحديث واجهة المستخدم ، سيتبع استدعاء Web API إجراء لتحديث المتجر. عندما يتم تحديث المتجر ، سيصدر حدث تغيير ونتيجة لذلك سيعاد عرض العرض الذي يستمع لهذا الحدث.

يتم إجراء استدعاءات واجهة برمجة تطبيقات الويب في منشئي الإجراءات يمكننا استخراج الكود الذي يقوم باستدعاء API في وظائف Web API Utils.

تدفق البيانات أحادي الاتجاه

تحديث تدفق المشاهدات في اتجاه واحد:

المشاهدات لا تعدل البيانات التي تلقوها. إنهم يستمعون للتغييرات في هذه البيانات ، وينشئون إجراءات بقيم جديدة ، لكن لا يقوموا بتحديث البيانات.

لا يمكن للمتاجر والمشاهدات وأي إجراء آخر تغيير الحالة في المتاجر (الأخرى) مباشرة. يجب عليهم إرسال إجراء من خلال المرسل

يكون تدفق البيانات في قراءات المتجر أقصر منه في عمليات الكتابة. يختلف تدفق البيانات في المتجر بين الإجراءات غير المتزامنة والمتزامنة.

يقرأ المتجر

مخزن يكتب في إجراءات متزامنة

المتجر يكتب في إجراءات غير متزامنة

الايجابيات

تعد بنية Flux أفضل في تطبيق حيث لا يتم تعيين طرق العرض مباشرة إلى متاجر المجال. لوضع طريقة مختلفة ، عندما تتمكن طرق العرض من إنشاء إجراءات من شأنها تحديث العديد من المتاجر والمتاجر ، يمكن أن تؤدي إلى تغييرات من شأنها تحديث العديد من طرق العرض.

يمكن الاستمرار في الإجراءات ثم إعادة تشغيلها.

سلبيات

يمكن أن يضيف Flux تعقيدًا غير ضروري إلى تطبيق حيث يتم تعيين كل عرض إلى متجر واحد. في هذا النوع من التطبيقات ، يكون الفصل بين العرض والمخزن كافياً.

ألق نظرة على سبيل المثال على كيفية إنشاء تطبيق من ثلاث طبقات باستخدام React.

استنتاج

مخازن إدارة الدولة. إنهم يغيرون الحالة فقط من خلال الاستماع إلى الإجراءات. مخازن تخطر وجهات النظر للتحديث.

تقدم طرق العرض واجهة المستخدم وتعالج تفاعل المستخدم. تستمع عروض الحاوية إلى تغييرات المتجر.

يقوم المرسل ببث الإجراءات إلى جميع المخازن المسجلة.

الإجراءات هي أشياء بسيطة.

تم تسمية Discover Functional JavaScript بأحد ملفاتأفضل كتب البرمجة الوظيفية الجديدة من BookAuthority !

لمعرفة المزيد حول تطبيق تقنيات البرمجة الوظيفية في React ، ألق نظرة على التفاعل الوظيفي .

تعلم React الوظيفية ، بطريقة قائمة على المشروع ، باستخدام البنية الوظيفية مع React و Redux .

تابع على تويتر