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

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

في تطبيقات Next.js ، تتضمن إدارة الحالة عادةً نوعين من الحالات: الحالة العامة وحالة المكون. تحتوي الحالة العالمية على معلومات مشتركة بين جميع المكونات في التطبيق مثل حالة مصادقة المستخدم ، بينما تخزن حالة المكون البيانات الخاصة بالمكونات الفردية.

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

تم اعتماد Reduxis على نطاق واسع كحل لإدارة الدولة عبر

مختلف أطر جافا سكريبت. ومع ذلك ، يمكن أن يؤدي إلى تعقيدات ، خاصة بالنسبة للمشاريع الصغيرة.

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

للتغلب على هذه التحديات ، مجموعة أدوات Redux (RTK) يأتي للإنقاذ. يهدف بشكل أساسي إلى تبسيط تجربة التطوير عند العمل مع مكتبة إدارة الدولة Redux. يوفر مجموعة من الأدوات والأدوات المساعدة التي تبسط مهام Redux الشائعة ، مما يلغي الحاجة إلى الكود المعياري المفرط.

الآن ، دعنا نتعمق في استخدام مجموعة أدوات Redux لإدارة الحالة في تطبيقات Next.js. للبدء ، أنشئ مشروع Next.js وثبّت التبعيات المطلوبة باتباع الخطوات أدناه.

1. أنشئ مشروع Next.js جديدًا محليًا عن طريق تشغيل الأمر أدناه في جهازك الطرفي:

   npx create-next-app @ latest next-redux-toolkit

2. بعد إنشاء المشروع ، انتقل إلى دليل المشروع عن طريق تشغيل:

   cd next-redux-toolkit

3. أخيرًا ، قم بتثبيت التبعيات الضرورية في مشروعك باستخدام npm ، مدير حزم العقدة.

   npm install @ reduxjs / toolkit رد فعل-redux

بمجرد إعداد مشروع Next.js الأساسي ، فأنت الآن جاهز لإنشاء تطبيق Next.js التجريبي الذي يستخدم Redux Toolkit لإدارة الحالة.

يمكنك العثور على رمز هذا المشروع في هذا مستودع جيثب.

تكوين متجر Redux

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

لإنشاء متجر Redux ، قم بإنشاء ملف إعادة مجلد في الدليل الجذر لمشروع Next.js الخاص بك. داخل هذا المجلد ، قم بإنشاء ملف store.js ملف وإضافة الكود التالي:

يستورد {configStore} من"@ reduxjs / مجموعة الأدوات";
يستورد الملف الشخصي من"./reducers/profileSlice";
يصدّرتقصير configStore ({
 المخفض: {
 الملف الشخصي: الملف الشخصي المخفض
 }
})

يستخدم الكود أعلاه تكوين المخزن وظيفة لإنشاء وتكوين متجر Redux. يتضمن تكوين المتجر تحديد مخفضات باستخدام مخفض هدف.

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

من خلال إعداد متجر Redux ، يُنشئ الكود البنية الأساسية لإدارة حالة التطبيق باستخدام مجموعة أدوات Redux.

تحديد شرائح الحالة

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

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

يستورد {إنشاء شريحة} من"@ reduxjs / مجموعة الأدوات";
مقدار ثابت profileSlice = createSlice ({
 اسم: 'حساب تعريفي',
 الحالة الأولية: {
 اسم: 'لا أحد'
 },
 مخفضات: {
 اسم مجموعة: (الدولة والعمل) => {
 state.name = action.payload
 }
}})
يصدّرمقدار ثابت {SET_NAME} = profileSlice.actions ،
يصدّرتقصير الملف الشخصي شريحة.

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

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

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

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

قم بإنشاء مكون لاختبار وظائف إدارة الحالة في RTK

افتح ال index.js ملف في الصفحات الدليل ، احذف رمز boilerplate Next.js ، وأضف الكود التالي.

يستورد الأنماط من"@ / styles / Home.module.css"
يستورد {useRef} من'تتفاعل'
يستورد {useSelector، useDispatch} من"رد فعل - إعادة"
يستورد {اسم مجموعة} من"../../redux/reducers/profileSlice"
وظيفةاسم العرض(){
مقدار ثابت {name} = useSelector ((ولاية) => state.profile)
يعود (

 انا {name}!! </h1> 
 ) }
يصدّرتقصيروظيفةبيت() {
مقدار ثابت inputName = useRef ()
مقدار ثابت إرسال = useDispatch ()
وظيفةاسمي() {
وحدة التحكم.log (inputName.current.value)
 إرسال (SET_NAME (inputName.current.value))
 }
يعود (
 <>

'أدخل الاسم' المرجع = {inputName} />
أدخل الاسم </button>

 </main>
 </>
 )}

يقوم الكود أعلاه بإنشاء وعرض مكون Next.js الذي يسمح للمستخدم بإدخال اسم وعرض الاسم المقدم في صفحة المتصفح. إدارة حالة التطبيق بشكل فعال باستخدام مجموعة أدوات Redux.

ال اسم العرض يستخدم المكون useSelector ربط للوصول إلى اسم الخاصية من حالة الملف الشخصي في متجر Redux وعرضها على الصفحة.

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

قم بتحديث ملف _app.js

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

افتح ال _app.js ملف وتحديثه على النحو التالي:

يستورد {مزود} من"رد فعل - إعادة"
يستورد محل من"../../redux/store"
يصدّرتقصيروظيفةبرنامج({مكون ، pageProps}) {
يعود (


 </ مزود>)
}

الآن ، انطلق وابدأ خادم التطوير ليعكس التغييرات التي أجريتها ، وانتقل إلى http://localhost: 3000 في متصفحك لاختبار التطبيق.

npm تشغيل dev

معالجة معالجة معالجة الجفاف عند إعادة تحميل الصفحة

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

على العميل ، تكون شفرة JavaScript مسؤولة عن إعادة بناء حالة التطبيق عن طريق استرداد الحالة التسلسلية المستلمة من الخادم وإلغاء تسلسلها.

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

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