اذهب إلى المحتوى

السؤال

Recommended Posts

  • 1
نشر

حتى تتمكن من فهم هذه الأكواد يجب أن تكون لديك معرفة بتقنيات تستخدم لإدارة الحالات في تطبيقا react و من هذه التقنيات المستخدمه هنا مكتبة redux و مكتبة redux-thunk، يمكنك التعلم عنهم من التوثيق الرسمي الخاص بهم أو من خلال متابعة أي سلسلة تعليمية تفضلها. و لكن بصفة عامة:

-- في السطر الأول نقوم باستيراد createStore و combineReducers و applyMiddleware من redux:

  • createStore: تقوم بإنشاء store و هذا ال store يحمل شجرة الحالات الخاصة بالتطبيق الخاص بك كاملةً. و من المفترض أن يمتلك التطبيق store واحد فقط. الطريقة الوحيدة لتغيير الحالة داخل ال store هي عن طريق عمل dispatch أي إرسال/إيفاد action "مُستمع أحداث" له.
  • combineReducers: كما ذكرنا سابقًا يجب أن يكون للتطبيق store واحد فقط، و لكن في بعض الأحيان تكون التطبيقات الخاصة بنا كبيرة لذلك يحتوي التطبيق على أكثر من دالة reducer كلًا منها يدير جزء منفصل من حالة التطبيق التطبيق.هنا يأتي عمل الدالة المساعدة combineReducers حيث تقوم بتجميع كل ال reducers و وضعهم داخل reducer وحيد يتم تمريره للدالة  createStore. و هذا ال reducer الناتج يقوم باستدعاء باقي ال reducers الأبناء و يجمع النتائج الخاصة بهم في في state object واحد 
  • applyMiddleware: الطبقة الوسيطة Middleware هي طريقة مقترحة لتوسعة redux بإضافة custom functionality

-- في السطر الثاني نقوم باستيراد ReduxThunk من المكتبة redux-thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action

  • و هو عبارة عن طبقة وسيطة تُمكننا من كتابة action creators تقوم بإعادة دوال بدلًا من actions و هذا بالتالي يُمكننا من استخدام ال thunk لتأخير عمل ال dispatch ل action ما أو يُمكننا من عمل dispatch لل action في حال تحققت ظروف معينة.

-- في الستة أسطر التالية نقوم باستراد ال actions و ال reducers الخاصة بال product و ال cart و ال orders.

-- بعد ذلك نقوم بإنشاء ال rootReducer و هو ال reducer الذي يجمع/يضم باقي ال reducers في كائن واحد باستخدام     الدالة combineReducers حتى نقوم بتمريره للدالة createStore و إنشاء ال store الخاص بالتطبيق كما ذكرنا سابقًا.

-- في السطر الذي يليه نقوم بإنشاء ال store الخاص بالتطبيق باستخدام الدالة createStore حيث نقوم بتمرير     ال rootReducer لها و الطبقة الوسيطة reduxThunk.

-- بعد ذلك نقوم بتصدير ال store 

-- و بعدها قام أيضًا بتجميع كل ال actions في كائن واحد كما فعلنا مع ال reducers

 

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...