मैं कुछ मदद की जरूरत है। मैंने अपनी समस्या को हल करने के कई तरीके आजमाए लेकिन मैं नहीं कर सकता, कुछ भी काम नहीं करता। जब मैं एकल "फल" पर क्लिक करता हूं, तो मैं फलों और सब्जियों के सरणियों में खरीद की मात्रा को बदलना चाहता हूं, मुझे कार्रवाई से आईडी मिली है। मुझे इस तरह से केवल फल सरणी मिली है:

state= [
        {id: 1, name:"apples", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 2,name:"pears", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 3,name:"bananas", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 4,name:"oranges", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 5,name:"plums", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
      ],

मेरा कोड है:

const initialState = {
loadingState: {},
productsCategories: [],
products: {
   fruits: [
        {id: 1, name:"apples", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 2,name:"pears", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 3,name:"bananas", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 4,name:"oranges", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 5,name:"plums", price: 2.50, avaibleProducts: 20, buyQuantity: 0},
      ],
vegetables: [
        {id: 1,name:"potatos",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 2,name:"tomatos",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 3,name:"onions",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 4,name:"carrots",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
        {id: 5,name:"pepper",price: 2.50, avaibleProducts: 20, buyQuantity: 0},
}
}

const productsCategoriesAndProducts = (state = initialState, action) => {



switch (action.type) {

case "ADD_PRODUCT":`enter code here`

  return state.products.fruits.map(fruit => {
    if (fruit.id === action.id) {
      return { ...fruit, buyQuantity: fruit.quantity + 1 }

    };

    return fruit;

  });

default:
  return state;
  }
}
export default productsCategoriesAndProducts;

कृपया मदद करे। आपके सहयोग के लिए धन्यवाद।

1
bidon dziura 23 सितंबर 2020, 00:28

2 जवाब

सबसे बढ़िया उत्तर

आपको हर उस स्तर पर संपूर्ण स्टेट ऑब्जेक्ट की प्रतिलिपि बनानी चाहिए, जिसे आप अपडेट करना चाहते हैं।

case "ADD_PRODUCT":`enter code here`

  return {
    ...state,
    products: {
      ...state.products,
      fruits: state.products.fruits.map(fruit => {
        if (fruit.id === action.id) {
          return { ...fruit, buyQuantity: fruit.quantity + 1 }
        };
        return fruit;
      })
    },
  };
0
Drew Reese 23 सितंबर 2020, 00:40

सैंडबॉक्स

अपने डेटा मॉडल को समतल करने का प्रयास करें। यहां सब्जी और फल बांटने का कोई मतलब नहीं है। यदि आपको केवल अपने फलों की आवश्यकता है, तो filter का प्रयोग करें। एक मिश्रित आईडी (category_product, जैसे fruit_apple) का उपयोग करके यह एक विलक्षण उत्पाद का चयन करने में भी बहुत कुशल बनाता है।

यह सख्त नियम की तुलना में अधिक व्यक्तिगत प्राथमिकता है लेकिन अपने तर्क कार्यों को अपने रेड्यूसर फ़ंक्शन से विभाजित करने का प्रयास करें। इस उदाहरण में मैंने incBuyQuantity को रेड्यूसर से अलग कर दिया है:

// Flattened Data Model
const initState = {
  loadingState: {},
  productsCategories: [],
  products: [
    {
      id: "fruit_apples",
      name: "apples",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "fruit"
    },
    {
      id: "fruit_pears",
      name: "pears",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "fruit"
    },
    {
      id: "vegetable_potatos",
      name: "potatos",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "vegetable"
    },
    {
      id: "vegetable_tomatos",
      name: "tomatos",
      price: 2.5,
      avaibleProducts: 20,
      buyQuantity: 0,
      category: "vegetable"
    }
  ]
};

// Logic
function incBuyQuantity(state, action) {
  return {
    ...state,
    products: state.products.map((product) =>
      action.id === product.id
        ? { ...product, buyQuantity: product.buyQuantity + 1 }
        : product
    )
  };
}

// Reducer
function reducer(state = initState, action) {
  switch (action.type) {
    case "INC_PRODUCT":
      return incBuyQuantity(state, action);
    default:
      return state;
  }
};

// Example
const action = { type: "INC_PRODUCT", id: "fruit_apples" };
const nextState = reducer(initState, action)
console.log(nextState.products[0].buyQuantity); // => 1
0
Alex Mckay 23 सितंबर 2020, 03:27