मैं कुछ मदद की जरूरत है। मैंने अपनी समस्या को हल करने के कई तरीके आजमाए लेकिन मैं नहीं कर सकता, कुछ भी काम नहीं करता। जब मैं एकल "फल" पर क्लिक करता हूं, तो मैं फलों और सब्जियों के सरणियों में खरीद की मात्रा को बदलना चाहता हूं, मुझे कार्रवाई से आईडी मिली है। मुझे इस तरह से केवल फल सरणी मिली है:
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;
कृपया मदद करे। आपके सहयोग के लिए धन्यवाद।
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;
})
},
};
अपने डेटा मॉडल को समतल करने का प्रयास करें। यहां सब्जी और फल बांटने का कोई मतलब नहीं है। यदि आपको केवल अपने फलों की आवश्यकता है, तो 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
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।