فهم ، وفي _ Redux Store Actions Reducers React

في تطبيق مدعوم من Redux، تدور البنية حول ثلاثة مفاهيم رئيسية: Redux و store و actions و reducers. دعونا نتعمق في كل من هذه المفاهيم ونرى كيف تعمل معًا.

Redux Store

يعد Redux store مصدرًا واحدًا للحقيقة يحمل الحالة الكاملة لتطبيقك. إنه في الأساس كائن JavaScript يحتوي على البيانات التي تمثل حالة التطبيق بأكملها. يمكنك إنشاء الوظيفة store باستخدام createStore الوظيفة من مكتبة Redux.

Actions

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

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers حدد كيفية تغير حالة التطبيق استجابةً لـ actions. المخفض هو دالة خالصة تأخذ الحالة الحالية والإجراء كوسائط وترجع حالة جديدة. Reducers يتم دمجها في مخفض جذر واحد باستخدام الوظيفة combineReducers. إليك مثال بسيط:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

العمل سويا

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

السيناريو المثال

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

خاتمة

يعد فهم كيفية تفاعل Redux store و actions و reducers وتفاعلًا أمرًا بالغ الأهمية لإدارة الحالة بشكل فعال. تضمن هذه البنية الفصل الواضح بين الاهتمامات وتسهل إدارة حالات التطبيق المعقدة. مع استمرارك في التطوير باستخدام Redux، ستشكل هذه المفاهيم الأساس لاستراتيجية إدارة حالتك.