Redux تخزين دماغ التطبيق الخاص بك

أفضل طريقة لتصميم تطبيق Redux الخاص بك

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

بالنسبة لأولئك الذين لم يستخدموا Redux من قبل ، سأقتبس من المستندات:

Redux عبارة عن حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript.

إنها فقط مكتبة بسعة 2 كيلو بايت تحل واحدة من أكبر المشكلات في صيانة تطبيقات JavaScript الكبيرة: إدارة الحالة.

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

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

في ما يلي الإطارات الهيكلية لكيفية ظهور التطبيق:

صفحة الكتالوجصفحة المنتجالدفع الناجح

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

هناك أربع مراحل لإنشاء تطبيق Redux:

  1. تصور شجرة الدولة
  2. تصميم المخفضات الخاصة بك
  3. تنفيذ الإجراءات
  4. تنفيذ العرض التقديمي

الخطوة 1: تصور شجرة الدولة

من الإطارات السلكية أعلاه ، دعونا نصمم شجرة دولتنا.

شجرة حالة التطبيق

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

الخطوة 2: تصميم المخفضات الخاصة بك

في حال كنت تتساءل عن ماهية المخفض بالضبط ، فسوف أقتبس مباشرةً من المستندات:

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

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

المتجر يراقب

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

// الجذر المخفض
const rootReducer = combineReducer ({
  header: headerReducer ،
  تسجيل الدخول: loginReducer ،
  تذييل الصفحة: footerReducer ،
  شائع: شائع المخفض ،
  المنتج: المنتج المخفض ،
  كتالوج: كتالوج المخفض ،
  الدفع: paymentReducer
})؛

المخفض الجذر يقول كل شيء. أنه يحتوي على كل ما يحتاج المتجر إلى معرفته عن التطبيق.

الآن دعونا نلقي نظرة على كيف يبدو رأس الكيان الفرعي headerReducer.

تذكر كيف صممنا دولة رأس لدينا؟

شجرة دولة رأس
// رأس المخفض
const headerReducer = combineReducer ({
  القائمة: القائمةالمخفض ،
  البحث: searchReducer ،
  الموقع: موقع المخفض
})؛

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

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

الآن ، دعونا نفهم كيف ينبغي إعداد ملف مخفض نموذجي ، على سبيل المثال searchReducer.

// البحث المخفض
const initialState = {
  الحمولة: [] ،
  isLownload: false ،
  خطأ: {}
}
search export searchReducer (state = initialState، action) {
  رمز التبديل (action.type) {
    الحالة FETCH_SEARCH_DATA:
      إرجاع {
        ...حالة،
        isLownload: صحيح
    }؛
    
    الحالة FETCH_SEARCH_SUCCESS:
      إرجاع {
        ...حالة،
        الحمولة: action.payload ،
        isLownload: false
      }؛
    
    الحالة FETCH_SEARCH_FAILURE:
      إرجاع {
        ...حالة،
        خطأ: action.error ،
        isLownload: false
      }؛
    الحالة RESET_SEARCH_DATA:
      إرجاع {... الحالة ، ... initialState}
    الإفتراضي:
      حالة العودة ؛
  }
}

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

FETCH_SEARCH_DATA ، FETCH_SEARCH_SUCCESS ، FETCH_SEARCH_FAILURE ، RESET_SEARCH_DATA

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

ملاحظة: من المهم الحفاظ على إجراء RESET_SEARCH_DATA ، في حال احتجنا إلى إعادة تعيين البيانات أثناء إلغاء تثبيت أحد المكونات.

الخطوة 3: تنفيذ الإجراءات

كل إجراء يتضمن مكالمات API يمر عادةً بثلاث مراحل في التطبيق.

  1. حالة التحميل -> FETCH_SEARCH_DATA
  2. النجاح -> FETCH_SEARCH_SUCCESS
  3. الفشل -> FETCH_SEARCH_FAILURE

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

دعنا نتعمق في الكود لفهم كيف سيبدو الإجراء المعتاد.

وظيفة التصدير fetchSearchData (args) {
  إرجاع المتزامن (إرسال) => {
    // بدء حالة التحميل
    إيفاد({
      النوع: FETCH_SEARCH_DATA
    })؛
    محاولة {
      // استدعاء API
      نتيجة const = تنتظر fetchSearchData (args.pageCount ، args.itemsPerPage) ؛
      
     // تحديث الحمولة في المخفض على النجاح
     إيفاد({
        النوع: FETCH_SEARCH_SUCCESS ،
        الحمولة: النتيجة ،
        currentPage: args.pageCount
      })؛
    } catch (err) {
     // تحديث خطأ في المخفض على الفشل
     إيفاد({
        النوع: FETCH_SEARCH_FAILURE ،
        خطأ: يخطئ
      })؛
    }
  }؛
}

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

هكذا تتم كتابة إجراءات مماثلة لكل تغيير في مخفضات الحالات المختلفة.

واحدة من أكبر فوائد Redux هي التجريد من كل عمل.

تدفق البيانات في تطبيق Redux

الخطوة 4: تنفيذ العرض التقديمي

import React، {Component} from 'react'؛
استيراد {connect} من "react-redux"
استيراد fetchSearchData من './action/fetchSearchData' ؛
استيراد SearchData من './SearchData' ؛
البحث const = (الدعائم) => (
  
const mapStateToProps = (state) => ({
  البحث: state.header.search.payload
})؛
const mapDispatchToProps = {
  fetchSearchData
}؛
الاتصال الافتراضي للتصدير (mapStateToProps ، mapDispatchToProps) (بحث)

كما ترون ، مكون العرض التقديمي بسيط للغاية وسهل الفهم.

خاتمة

أود أن أذكر بعض أكبر الفوائد التي وجدتها باستخدام Redux:

  1. بالتأكيد يقلل من رائحة الكود.
  2. إن تجريد الكود أسهل في تحقيقه.
  3. Redux يعرّفنا أيضًا بمبادئ أخرى مثل الثبات والبرمجة الوظيفية والعديد من المبادئ الأخرى.
  4. يسمح لك بتصور كل حركة وتتبعها مع "وقت السفر".

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

اتبعني على twitter للحصول على المزيد من التحديثات المتعلقة بالمقالات الجديدة ولمواكبة آخر التطورات في الواجهة الأمامية. شارك أيضًا هذه المقالة على Twitter لمساعدة الآخرين في معرفة ذلك المشاركة هي رعاية ^ _ ^.

تذكر أنه يمكنك التصفيق حتى 50 مرة لإظهار حبك!

بعض الموارد المفيدة

  1. https://redux.js.org/
  2. https://github.com/reduxjs/redux/blob/master/examples
  3. https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.c4yhhvk0d

مقالاتي السابقة

  1. https://medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  2. https://codeburst.io/redux-observable-to-the-rescue-b27f07406cf2
  3. https://codeburst.io/building-webapp-for-the-future-68d69054cbbd
  4. https://codeburst.io/cors-story-of-requesting-twice-85219da7172d