كيف يعمل Redux بكلمات بسيطة
تمرير البيانات بين مكونات React غالبًا ما يشبه لعبة "الهاتف المكسور". فأنت تمرر البيانات من مكون أب إلى مكون ابن ثم إلى حفيد. ويصبح الأمر فوضويًا مع نمو تطبيقك.
يحل Redux هذه المشكلة، حيث ينشئ "مصدرًا واحدًا للحقيقة". فبدلاً من البيانات المشتتة، يعيش كل شيء في خزنة مركزية واحدة.
تخيل مقهىً لتفهم كيف يعمل Redux.
المتجر (The Store) - الخزنة
هذا هو سجل الحسابات الخاص بالمقهى. فهو يتتبع عدد حبات البن، والطلبات، وقوائم الموظفين.
الإجراء (The Action) - الطلب
الزبون لا يأخذ كوب "لاتيه" من المنصة مباشرة، بل يقوم بتقديم طلب. الإجراء (Action) هو مجرد كائن (object) بسيط يصف ما حدث.
مثال: { type: 'ADD_TODO', text: 'Buy Milk' }
الـ Reducer (الباريستا)
الباريستا هو الشخص الوحيد الذي يقوم بتحديث سجل الحسابات. يأخذ الحالة الحالية (current state) والطلب الجديد، ثم يقوم بإنشاء نسخة جديدة من السجل.
الـ Dispatch (المحاسب)
يأخذ المحاسب طلبك ويسلمه إلى الباريستا. الـ Dispatch هو الدالة (function) التي ترسل الإجراء (action) الخاص بك إلى المتجر (store).
لماذا نستخدم Redux؟
مع توسع تطبيقك ليشمل ملفات تعريف المستخدمين أو عربات التسوق، يجعل المتجر المركزي عملية تصحيح الأخطاء (debugging) سهلة. يمكنك مراجعة سجل الإجراءات لمعرفة متى ولماذا تغيرت البيانات. إنه يعمل مثل "مسجل الرحلات" لموقعك الإلكتروني.
ملخص:
• Action: ملاحظة تصف التغيير. • Reducer: المنطق الذي ينفذ التغيير. • Dispatch: المحفز الذي يرسل الإجراء إلى المنطق.
المصدر: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp