طريقة تغيير ال boolean داخل object باستخدام redux

أحمد عبد الله2 · 15 أغسطس 2021

اريد ان اقوم بتغيير true ل false داخل array تحتوى على objects

import {ads} from '../../data/ads';
import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE, CLEAR_FAVORITE} from '../types';

interface ItemInter {
  id: number;
}

interface ActionInter {
  type: string;
  payload: {id: number};
}

const initialState = {
  myAllAds: ads,
  myFavorite: [],
};

const myFavorite = (state = initialState, action: ActionInter) => {
  switch (action.type) {
    case ADD_TO_FAVORITE:
      const item = state.myFavorite.find(
        (item: ItemInter) => item.id === action.payload.id,
      );
      if (item) return {...state};

      return {
        ...state,
        myAllAds: [
          ...state.myAllAds,
          // state.myAllAds[action.payload].isFav === false,
        ],
        myFavorite: [...state.myFavorite, action.payload],
      };

    case REMOVE_FROM_FAVORITE:
      return {
        ...state,
        myFavorite: state.myFavorite.filter(
          favItem => favItem !== action.payload,
        ),
      };
    case CLEAR_FAVORITE:
      return {...initialState};
  }
  return state;
};

export default myFavorite;

جربت كتابة هدا الكود
myAllAds: [...(state.myAllAds[action.payload].isFav = false)],

ولكنه اخرج لى هدا الايرور

TypeError: undefined is not an object (evaluating 'state.myAllAds[action.payload].isFav = false')

تم التعديل في 15 أغسطس 2021 بواسطة أحمد ابراهيم عبد الله

أحمد حبنكة · 15 أغسطس 2021

الطريقة الوحيدة لعمل ما تريده في حالتك هي نسخ المصفوفة قبل التعديل عليها هكذا:

const newmyAllAds = [...state.myAllAds];
newmyAllAds[action.payload].isFav = false;
return {
  ...state,
  myAllAds: newmyAllAds,
  myFavorite: [...state.myFavorite, action.payload],
};

وبهذا يتم التعديل.

ولكن لماذا لا تتعلم redux-toolkit وحينها بدلاً من كل هذا التعقيد يصير تابع add شبيهاً بالتالي:

const item = state.myFavorite.find(
  (item: ItemInter) => item.id === action.payload.id,
);
if (item) return;
state.myFavorite.push(action.payload);
state.myAllAds[action.payload].isFav = false;

أحمد عبد الله2 · 15 أغسطس 2021

بتاريخ 5 دقائق مضت قال أحمد حبنكة:
الطريقة الوحيدة لعمل ما تريده في حالتك هي نسخ المصفوفة قبل التعديل عليها هكذا:
const newmyAllAds = [...state.myAllAds];
newmyAllAds[action.payload].isFav = false;
return {
  ...state,
  myAllAds: newmyAllAds,
  myFavorite: [...state.myFavorite, action.payload],
};
وبهذا يتم التعديل.

ولكن لماذا لا تتعلم redux-toolkit وحينها بدلاً من كل هذا التعقيد يصير تابع add شبيهاً بالتالي:
const item = state.myFavorite.find(
  (item: ItemInter) => item.id === action.payload.id,
);
if (item) return;
state.myFavorite.push(action.payload);
state.myAllAds[action.payload].isFav = false;

شكرا على الاجابة ولكن لمادا تنصحنى ب redux tool-kit هل يمكنك ان تخبرنى لما هى جيدة

أحمد حبنكة · 15 أغسطس 2021

بتاريخ الآن قال أحمد ابراهيم عبد الله:

شكرا على الاجابة ولكن لمادا تنصحنى ب redux tool-kit هل يمكنك ان تخبرنى لما هى جيدة

ﻷن حالتك وحالات مشابهة لها تصير سهلة جداً بـredux-toolkit هذا عدا عن تنظيم كود redux بشكل جميل بالطبع.

طريقة تغيير ال boolean داخل object باستخدام redux

السؤال

أحمد عبد الله2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

أحمد حبنكة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

أحمد عبد الله2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

أحمد حبنكة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية