كيفية استخدام Redux على تطبيقات جافا سكريبت قابلة للتطوير بدرجة كبيرة؟

إعادة تكوين والتغليف على نطاق واسع

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

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

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

لماذا يصعب الحفاظ على حالة Redux أثناء نمو تطبيقي؟

Redux هي أداة رائعة للغاية وقد ترغب في استخدامها لعدة أسباب. قد تحتاج إلى مشاركة بعض الحالات من مكون معين دون الحاجة إلى تمريرها عبر الدعائم ، والحصول على البيانات من خادم API ومشاركتها عبر تطبيقك ، والحفاظ على السجل والسفر عبر الزمن عبر الإجراءات أو حتى تخزين حالة التطبيق في التخزين المحلي لجهاز المستخدم لاستعادته لاحقًا. لكن لا تنسى أبدًا أنك قد لا تحتاج إلى إعادة

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

عندما تكون لديك مشكلات في حالة Redux ، فمن المحتمل أنك قد تواجه مشكلات في الحفاظ على التطبيق بأكمله وكذلك لنفس الأسباب.

  • هل لديك الكثير من منشئي الحركة العالمية؟
  • هل لديك مخفض ضخم يدير كل شيء؟
  • هل لديك تعارض بين أفعالك أو المخفضات التي تعدل نفس الحالة؟

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

أضف ملفات Redux مع ميزتك

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

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

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

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

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

/مشاهد
  / كتب
    / مكونات
      /قائمة المواد
    /actions.js
    /index.js
    /reducer.js

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

إنشاء وحدات بيانات مستقلة

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

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

يبدو تشريح وحدة البيانات كما يلي:

المبدعين العمل

يعتنون الجزء المنطقي الأعمال. يتلقون حمولة ، ويحولونها حسب الحاجة ويعيدون إجراءً يتم إرساله لتحديث متجر Redux. في معظم المشروعات ، قد ترغب أيضًا في استخدام redux-thunk من أجل اتخاذ إجراءات غير متزامنة مثل إرسال الطلبات إلى واجهة برمجة تطبيقات الخادم.

المخفضات والمحددات

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

تكون المحددات مهمة إذا كنت ترغب في تصفية حالتك قبل استخدامها في مكونات الحاوية الخاصة بك. يمكنك تعريفها في ملف reduer.js لأنها مرتبطة بنفس قطعة الحالة.

API

أنصحك بإنشاء ملف يسمى api.js حيث يمكنك تحديد طلبات الشبكة الخاصة بك.

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

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

تجميع ميزات متعددة في واحدة

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

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

لكل مجلد من مجلدات البيانات ، لدينا مخفض مسؤول عن دمج جميع وحدات البيانات المحددة في هذا المجلد. على الرغم من أن المُخفض قد لا يُرجع وحدة بيانات واحدة فقط ، إلا أنه في ظل ظهور وحدات بيانات إضافية تُضاف في المستقبل وللحفاظ على كل شيء متسقًا عبر التطبيق ، من الأفضل أن يتم استيرادها جميعًا ودمجها في ذلك المخفض المفرد ، وبالتالي فإن مُعدِّل الميزة الخاص بك يمكن ببساطة استيرادها واستخدامها لتوفير جميع وحدات البيانات في وقت واحد. يتم بعد ذلك استخدام مُخفِض الميزة من قِبل مُخَفِّض الميزة الخاص بوالدها المباشر أو في مُخفض الجذر إذا تم تعريفه على المستوى العالمي.

هذه هي الطريقة التي يبدو بها المخفض في المشاهد / الكتب التي تحتوي على وحدات البيانات:

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

بمجرد الجمع بين المخفضات بشكل صحيح مع جميع ميزاتك ، يجب أن تبدو شجرة حالة Redux في تطبيقك كما يلي:

الآن وقد تم تجميع المخفضات الخاصة بك بعد هذا الهيكل ، يمكن لمكونات الحاوية الخاصة بك الاتصال بمخزن Redux واستخدام المحددات التي قمت بتحديدها من قبل لاستهلاك البيانات وإرسال إجراءات الميزة الخاصة بك لإجراء تغييرات في المتجر.

تغليف

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

قمت بنشر نموذج حسابي على حساب جيثب يتبع هذا الهيكل: https://github.com/alexmngn/react-feedback-form

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

المزيد من المقالات مني

  • كيفية تنظيم تطبيقات React الخاصة بك بشكل أفضل؟
  • ما هي الاختلافات الرئيسية بين ReactJS و React-Native؟
  • لوحة أساسية ضرورية لمصادقة المستخدمين على تطبيق React-Native الخاص بك

عني

مرحبا ، أنا الكسيس! أنا مطور تطبيق جافا سكريبت يعمل منذ أكثر من 15 عامًا. أنا متخصص في تصميم وتطوير تطبيقات الويب والهواتف المحمولة القابلة للتطوير بدرجة كبيرة أثناء الاستمتاع بالبرمجة الوظيفية. لقد بدأت مؤخرًا استخدام Twitter ، يمكنك متابعتني هنا: @ alexmngn