كيف أقوم بتقليل 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

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية