ما هو React Redux وكيف تستخدمه؟

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

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

أنشأ فريق Redux ثلاث مكتبات ، وهي Redux و React-Redux و Redux Toolkit. تعمل المكتبات الثلاث معًا لتوفر لك أقصى استفادة من تجربة تطوير React ، وفي هذه المقالة التعليمية ، ستتعلم كيفية استخدامها.

أهمية React-Redux

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

React-Redux هي مكتبة ربط Redux UI الرسمية لتطبيقات React ، ويحتفظ بها فريق Redux.

متعلق ب: كيفية إنشاء أول تطبيق تفاعل باستخدام JavaScript

تثبيت Redux في دليل المشروع الخاص بك

هناك طريقتان للوصول إلى مكتبة Redux في تطبيق React الخاص بك. النهج الموصى به من قبل فريق Redux هو استخدام الأمر التالي عند إنشاء مشروع React جديد:

npx create-reaction-app my-app - إعادة تمثيل القالب

يقوم الأمر أعلاه تلقائيًا بتكوين Redux Toolkit و React-Redux و Redux store. ومع ذلك ، إذا كنت تريد استخدام Redux في مشروع React موجود ، فيمكنك ببساطة تثبيت مكتبة Redux كاعتماد باستخدام الأمر التالي:

npm تثبيت redux

تليها مكتبة واجهة مستخدم ربط React-Redux:

npm تثبيت رد الفعل-إعادة

ومجموعة أدوات Redux:

npm install @ reduxjs / toolkit

تعد مكتبة Redux Toolkit مهمة أيضًا لأنها تجعل عملية تكوين متجر Redux سريعة وسهلة.

إنشاء متجر Redux

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

لدى React ، مثل معظم أطر العمل الأمامية ، نقطة دخول في تطبيقاتها ، وهي عبارة عن ملف أو مجموعة من الملفات في المستوى الأعلى. ال index.html و index.js الملفات عبارة عن ملفين يوجدان في المستوى العلوي لتطبيق React ، والذي يكون أعلى من ملف App.js ملف وجميع مكونات التطبيق.

لذلك index.js file هو المكان المثالي لإنشاء متجر Redux.

تحديث index.js باستخدام متجر Redux

استيراد رد من "رد فعل"
استيراد ReactDOM من "رد فعل دوم"
استيراد التطبيق من "./App"
استيراد reportWebVitals من "./reportWebVitals"
استيراد {configStore} من "@ reduxjs / toolkit"
استيراد {Provider} من "رد فعل إعادة الإرسال"
استيراد مستخدم من "./reducers/user"
مخزن const = configStore ({
 المخفض: {
 المستعمل
 }
})
ReactDOM.render (




,
 document.getElementById ('root')
)
reportWebVitals () ،

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

لن يعرف تطبيق React الخاص بك أن متجر Redux موجود بدون امتداد مكون الموفر، والتي تأتي من مكتبة تجليد React-Redux. يأخذ مكون الموفر دعامة واحدة (المتجر) ويلتف حول تطبيق React ، مما يجعل متجر Redux متاحًا عالميًا.

الاستيراد الجديد الثالث والأخير في index.js الملف أعلاه هو مخفض المستخدم، وهو أمر مهم للغاية لتشغيل متجر Redux الخاص بك.

لماذا المخفض مهم؟

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

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

إنشاء مخفض المستخدم

استيراد {createSlice} من "@ reduxjs / toolkit" ؛
تصدير const userSlice = createSlice ({
 الاسم: "المستخدم" ،
 الأولي: {القيمة: {البريد الإلكتروني: ""}}،
 مخفضات: {
 تسجيل الدخول: (حالة ، إجراء) => {
 state.value = action.payload
 },
 }
})
تصدير const {login} = userSlice.actions
تصدير الافتراضي userSlice.reducer ؛

داخل React's srcالدليل يمكنك إنشاء ملف دليل المخفض، حيث يمكنك تخزين مخفض المستخدم وأي مخفض آخر تريد إضافته إلى متجر Redux الخاص بك. ال user.js الملف أعلاه يستورد ملف خلق شريحة وظيفة من مجموعة أدوات Redux.

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

يقوم ملف user.js بتصدير أداة تقليل تسجيل الدخول. يقوم مكون تسجيل الدخول باستيراده واستخدامه في ملف useDispatch () صنارة صيد.

إنشاء مكون تسجيل الدخول

استيراد رد من "رد فعل" ؛
استيراد رابط من "@ mui / material / Link" ؛
استيراد TextField من "@ mui / material / TextField" ؛
استيراد الطباعة من "@ mui / المواد / الطباعة" ؛
استيراد {Button، Box} من "@ mui / material" ؛
استيراد {useDispatch} من "رد فعل- redux" ؛
استيراد {login} من "../reducers/user" ؛
استيراد {useState} من 'رد فعل'؛
وظيفة تسجيل الدخول () {
 إرسال const = useDispatch ()
 const [email، setEmail] = useState ('')
 const handleSubmit = () => {
 إرسال (تسجيل الدخول ({البريد الإلكتروني: البريد الإلكتروني}))
 }
إرجاع (


sx = {{
بلدي: 8 ،
عرض: "فليكس" ،
flexDirection: "العمود" ،
محاذاة العناصر: "مركز" ،
}}>
 تسجيل الدخول 
التسمية = "عنوان البريد الإلكتروني"
مطلوب
معرف = "البريد الإلكتروني"
الاسم = "البريد الإلكتروني"
الهامش = "عادي"
onChange = {(e) => setEmail (e.target.value)}
/>
التسمية = "كلمة المرور"
مطلوب
معرف = "كلمة المرور"
الاسم = "كلمة المرور"
اكتب = "كلمة المرور"
الهامش = "عادي"
/>
href = "#"
sx = {{mr: 12، mb: 2}}
>
نسيت كلمة السر؟

المتغير = "مضمّن"
sx = {{mt: 2}}
onClick = {handleSubmit}
>
تسجيل الدخول





);
}
تصدير الافتراضي تسجيل الدخول ؛

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

ال مقبض تستخدم الوظيفة ال useState () و useDispact () السنانير مع مخفض تسجيل الدخول لإتاحة عنوان البريد الإلكتروني للمستخدم النشط في متجر Redux. من متجر Redux ، أصبح بإمكان كل مكون في تطبيق React الآن الوصول إلى البريد الإلكتروني للمستخدم النشط.

متعلق ب: خطاف: بطل رد الفعل يسترد مكون المستخدم النشط التالي عنوان البريد الإلكتروني للمستخدم النشط بمساعدة خطاف useSelector () ويعرضه على واجهة مستخدم التطبيق.

ملف ActiveUser.js

استيراد رد من "رد فعل" ؛
استيراد {useSelector} من "رد فعل- redux" ؛
وظيفة ActiveUsers () {
 مستخدم const = useSelector ((state) => state.user.value)
 إرجاع (


المستخدمين النشطين

 {البريد الالكتروني للمستخدم} 




 );
}

ملف App.js المحدث

ألق نظرة على هذا الجزء من الكود:

استيراد رد من "رد فعل" ؛ استيراد ActiveUsers من "./components/ActiveUsers" ؛ استيراد تسجيل الدخول من "./components/Signin" ؛
وظيفة التطبيق () {
إرجاع ( 
);
}
تصدير التطبيق الافتراضي ؛ 

ال App.js يعرض الملف أعلاه كلاً من المستخدمين النشطين ومكونات تسجيل الدخول في تطبيق React الخاص بك مما يؤدي إلى إنشاء المخرجات التالية في متصفحك:

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

واجهة المستخدم المحدثة

متى يجب استخدام Redux؟

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

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

ومع ذلك ، إذا كانت لديك حالة تُستخدم فقط بواسطة مكون أو مكونين على الأكثر ، فقد يكون الخيار الأفضل هو React props.

كيفية استخدام الدعائم في ReactJS

إذا كنت تبحث عن نصائح حول كيفية استخدام الدعائم في ReactJS ، فأنت في المكان الصحيح.

اقرأ التالي

عن المؤلف