دليل المبتدئين للتفاعل / الإعادة - كيف تبدأ التعلم ولا تغمرك

الصورة من قبل الروم ماجر على Unsplash

إخلاء المسئولية: هذا هو دليل المبتدئين الذي كتبه مبتدئين React / Redux.

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

عندما حاولت تشغيل مشروع React / Redux ، أتصفح مقالات لا حصر لها حول كيفية هيكلة دليل الملفات الخاص بي: ملفات مجمعة حسب النوع ، مجمعة حسب المكونات ، مجمعة حسب المجال ... إلخ.

المصدر: http://gph.is/2k9DFT4

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

الخطوة 1: اختيار نهج برأيه والتمسك به

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

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

الخطوة 2: تبدأ صغيرة

كان هدفي بسيطًا في البداية: تقديم قائمة بالمقالات التي جمعتها باستخدام تطبيق مجمع الأخبار. ستكون استجابة قاعدة بيانات الأخبار عبارة عن مجموعة من المقالات تحتوي على بنية البيانات التالية.

تقديم قائمة من المقالات حول Ethereum

الخطوة 3: اختيار boilerplate

لقد استخدمت الملف المصمم من قِبل مدربي الجميلين في أكاديمية Fullstack. (لم ألتقط قطار React / Redux هناك. كانت زملائي هي آخر شخص تعلم AngularJS) لقد اخترت هذا boilerplate لأنه يستخدم javascript fullstack: React / Redux لـ الواجهة الأمامية و Express / Sequelize / PostgreSQL للخلفية. لغرض هذا التمرين ، قمت بتنظيف اللمعة قليلاً للأشخاص دون Express / Sequelize / PostgreSQL للمتابعة. سنعمل فقط مع React / Redux من الآن فصاعدًا.

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

هذا هو هيكل الملف.

SRC /
  مكونات /
    ListView.js
    ListRow.js
  حاويات /
    ArticlesIndex.js
  خدمات/
    articles.js
  متجر/
    مقالات/
      actions.js
      actionTypes.js
      reducer.js
    index.js

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

الخطوة 4: ابدأ بحالة Redux

ما الحالة التي لدى تطبيقنا؟ نحن نتحدث عن تطبيق بسيط من صفحة واحدة مع قائمة بالمقالات. نحتاج إلى تخزين قائمة المقالات التي تم استردادها من الخادم. إذا ألقيت نظرة على articles.js في src / services / articles ، فسترى مصفوفة مليئة بالمقالات. نظرًا لأن الغرض من هذا التمرين هو التعرف على تدفق البيانات الخاص ببنية React / Redux ، فإن دالة getAllArticles () تُرجع المقالات التي نحتاجها مباشرةً. في العالم الواقعي ، ستكون هذه الوظيفة بمثابة دعوة غير متزامنة لبعض API عن بعد.

والسؤال الآن هو كيفية هيكلة دولتنا. الاستجابة من الخادم (أو في هذه الحالة ، وظيفة getAllArticles) هي مجموعة من الكائنات. يمكننا وضعه في دولتنا.

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

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

الخطوة 5: تنفيذ تدفق البيانات لحالتك من البداية إلى النهاية

كيف يمكننا تحديث هذه الحالة؟ هذا هو المكان الذي يأتي فيه الإجراء والمخفض. النظر في هذا المخطط التدفق:

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

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

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

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

الخطوة 6: تقديم

سنقوم بتوصيل حاوية تسمى ArticleIndex بحالة المقالة. AritcleIndex عبارة عن حاوية ذكية يمكنها التواصل مع متجر Redux. داخل ArticleIndex ، هناك مكون أخرس يسمى ListView ، كتبه Tal Kol ، مؤلف برنامج Redux التعليمي الذي تابعتُه. يمكنك التحقق من التنفيذ في مجلد المكونات.

يأخذ ListView articlesById ، مجموعة من معرفات المادة وتقديم وظيفة. ثم يقدم قائمة المقالات.

كيف يمكننا عرض articlesById ومجموعة من معرفات المقالة؟ إليك مراجعة لمفهوم Redux الأساسي. عرض React متصل بحالة Redux من خلال وظيفة الاتصال التي توفرها مكتبة رد فعل رد الفعل.

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

وهذا كل شيء! لدينا قائمة من المقالات في متصفحنا!

الخطوة 7: مكافحة نمط في مكان ما في التعليمات البرمجية؟

من أجل تعلم تدفق البيانات في React / Redux ، لقد تجاهلنا مفهوم Redux آخر حتى الآن. يجب أن يصل مكون التفاعل إلى حالة Redux من خلال المحددات. محددات عادة ما تكون موجودة في الملفات reduer.js. إنها وظائف خالصة تصل إلى حالة Redux وتعيد بعض خصائص الحالة. مع وجود محددات في المكان ، إذا قمت بتغيير إحدى حالات Redux التي تؤثر على أكثر من مكون واحد ، فأنت تحتاج فقط إلى تحديث المحدد.

إليك محدد منتقى get:

تصبح وظيفة mapStateToProps في ArticleIndex.js:

المكافأة: اتبع نفس عملية التفكير وابني مرشحًا

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

شطف ، كرر ، ريفاكتور

إن تعلم React / Redux يشبه القفز في حفرة أرنب ، لكنه حوّلني من متشكك إلى مؤمن. آمل أن يقفز هذا المقال تعلمك.

من الخطوة الأولى للطفل ، تحول مشروع التعلم الخاص بي إلى أداة تجميع الأخبار وتتبع الاتجاهات!

شكرا لقرائتك!

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