كيف أقوم بتقليل initialState باستخدام الريدكس .. عندما يكون داخل مصفوفة وليس أوبجكت

Ahmed Sawy · 1 مارس 2021

السلام عليكم .. كيف أجعل هذا ال reducer يقلل الكمبية بمقدار 1 فى ال initState الخاصة ب cakes.qty فى كل مرة اقوم بعمل dispatch للأكشن ..

هذا هو الكود

// Here is The Reducer

import { SELL_ONE_CAKE } from "./types";

const initialState = {
  cakes: [
    {
      id: 1,
      title: "Classic Cake",
      qty: 40,
      price: 15,
    },
    {
      id: 2,
      title: "Chocolate Cake",
      qty: 10,
      price: 20,
    },
    {
      id: 3,
      title: "Simple White Cake",
      qty: 40,
      price: 30,
    },
  ],
};


// I Think The problem is here

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SELL_ONE_CAKE:
      return { ...state, cakes: state.cakes[0].qty - 1 };   // => I Think The problem is Here
    default:
      return state;
  }
};


// The Action

import { SELL_ONE_CAKE } from "./types";

export const sellOneCake = () => ({
  type: SELL_ONE_CAKE,
});


// The Screen

      <Text>porfit: {Profits}</Text>
      <Text>Number Of Cakes: {cakes}</Text>
      <Button title="Sell One Cake" onPress={() => dispatch(sellOneCake())} />

فقط أريد أن أعرف ما المفترض أن أكتبه هنا لكى يقل الرقم

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SELL_ONE_CAKE:
      return { ...state, cakes: state.cakes[0].qty - 1 };   // => I Think The problem is Here
    default:
      return state;
  }
};

Mohammed Saber6 · 1 مارس 2021

الطريقة التي تعدل بها خاطئة

بتاريخ 13 ساعات قال Ahmed Sawy:


export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SELL_ONE_CAKE:
      return { ...state, cakes: state.cakes[0].qty - 1 };   // => I Think The problem is Here
    default:
      return state;
  }
};

فهنا أنت سيكون الناتج كالآتي

// الجزء الأول صحيح حيث أنك تستخدم الحالة السابقة لكن عند إضافة cakes
// فأنت لا ترجعها مصفوفة وإنما رقم لأنك أسندتها إلى رقم 
{ ...state, cakes: state.cakes[0].qty - 1 };
// ليكون الناتج
/*
{
	cakes: 39
}
*/

الحل هو أنك تقوم بالتعديل على ال cakes وتقوم بإرجاع ال array ثم إعطائه لل state
```
case SELL_ONE_CAKE:
	const modifiedCakes = [ ...state.cakes ];
	modifiedCakes[0].qty -= 1;

	return { ...state, cakes: modifiedCakes };
```
وبهذا يتم تعديل الرقم وترجع الحالة كما هي

Salah Eddin Beriani2 · 2 مارس 2021

لديك مشكلتين أساسيتين في الكود الذي وفرته الاولى هي خطأ في التعديل والثانية هي أنك تحدد ال cake يدويا بالنسبة لمشكلتك الاولى فالحل بسيط

case SELL_ONE_CAKE:
	const newCakes = [ ...state.cakes ]; نسخ القائمة
	newCakes[0].qty -= 1; تعديل على القائمة

	return { ...state, cakes: newCakes }; لصق القائمة

أما لمشكلة التعديل اليدوي فيكنك توفير ال id مثلا عندما تقوم بعمل dispatch ثم تقوم باستخدام filter لتحصل على ال index للقيام بعملية التعديل

case SELL_ONE_CAKE:
	let newCakes = state.cakes.filter((cake,i)=> {
 if (cake.id === action.payload.id) {
          index = i; //index is global var
        }
      return  cake.id !== action.payload.id
})
    let modifiedCake = {...state.cake[index],qty:state.cake[index].qty - 1}
    newCakes.splice(index, 0, modifiedCake);

	return { ...state, cakes: newCakes };

كيف أقوم بتقليل initialState باستخدام الريدكس .. عندما يكون داخل مصفوفة وليس أوبجكت

السؤال

Ahmed Sawy

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

Recommended Posts

Mohammed Saber6

Salah Eddin Beriani2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية