طريقة تغيير ال 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

أحمد حبنكة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية