اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

بالنسبة لي فهي طريقة غير واضحة وغير مفهومة 
البديل يمكنك استخدام filter فهي أبسط 
 

DELETE_PLATE: (state, action) => ({
  ...state,
  plates: state.plates.filter((plate, index) => index !== action.payload) // نقوم فقط بإرجاع العناصر التي لها id
  // لا يسا،ي ال action.payload
  
})

 

  • 0
نشر

المعذرة ولكن هل أنت تستخدم redux-toolkit؟ ﻷن الـsyntax يبدو مشابهاً لها إذ لا أرى أي تعليمة switch، إن كنت تستعملها فاحذف العنصر من المصفوفة كما تفعل في الجافاسكريبت العادية هكذا:

DELETE_PLATE: (state, action) => {
  const actionIndex = state.plates.findIndex(plate => plate === action.payload);
  state.plates.splice(actionIndex);
}

لاحظ جمال redux-toolkit ، إنها تسمح لك أن تعدل على state مباشرةً دون المساس بمبادئ redux وذلك ﻷن redux-toolkit تستعمل مكتبة immerjs التي تسهل عليك نسخ object وبالتالي تحقيق القاعدة التي تنص على أن state يجب أن يكون immutable.

لكن إن كنت لا تستعمل redux-toolkit فالطريقة لحذف عنصر من مصفوفة هي بنسخ المصفوفة أولاً، حذف العنصر ثم إرجاعها هكذا:

DELETE_PLATE: (state, action) => {
  const actionIndex = state.plates.findIndex(plate => plate === action.payload);
  const newPlates = [...state.plates]; // this way we copy state.plates, newPlates !== state.plates will be true
  newPlates.splice(actionIndex); // since newPlates is a copy we can modify it 
  return {...state,plates: newPlates};
}

مع أنني لا أدري من أين أتيت بهذا syntax الغريب إن لم تكن تستعمل redux-toolkit ، هل الكود السابق pseudo-code ؟

على كل حال أنا أنصح باستخدام redux-toolkit في جميع مشاريع الـredux وهذا ما ينصح به مطورو redux أنفسهم.

انضم إلى النقاش

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

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...