1 Yomna Raouf نشر 5 نوفمبر 2020 أرسل تقرير نشر 5 نوفمبر 2020 حتى تتمكن من فهم هذه الأكواد يجب أن تكون لديك معرفة بتقنيات تستخدم لإدارة الحالات في تطبيقا 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 1 اقتباس
السؤال
Ahmed Sawy
ممكن شرح هذا الكود ..
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.