संदर्भ के साथ Next.js में शॉपिंग कार्ट कैसे बनाएं और रेड्यूसर का उपयोग करें

शॉपिंग कार्ट किसी भी ई-कॉमर्स साइट का एक अनिवार्य हिस्सा है। यह ग्राहकों को उत्पादों को स्टोर करने और खरीदने की अनुमति देता है।

Next.js ई-कॉमर्स ऐप में, आप कार्ट बनाने के लिए कॉन्टेक्स्ट एपीआई और यूज़रेड्यूसर हुक का उपयोग कर सकते हैं। संदर्भ एपीआई घटकों के बीच कार्ट डेटा साझा करने को सरल बनाता है जबकि उपयोगरेड्यूसर कार्ट स्थिति को संभालता है।

उत्पाद पृष्ठ बनाना

पेज फोल्डर में, Product.jsx नाम की एक नई फाइल बनाएं जो सिंगल प्रोडक्ट को रेंडर करती है।

निर्यातगलती करनासमारोहउत्पाद({आईडी, नाम, कीमत}) {
वापस करना (


{नाम}</p>

{कीमत}</p>
कार्ट में जोड़ें</button>
 </div>
 )
}

उत्पाद घटक किसी उत्पाद की आईडी, नाम और मूल्य को स्वीकार करता है और उसे प्रदर्शित करता है। इसमें "कार्ट में जोड़ें" बटन भी है।

जब कोई उत्पाद पहले से ही कार्ट में जोड़ा जाता है, तो बटन को "कार्ट से निकालें" बटन पर स्विच करना चाहिए और यदि कोई उत्पाद कार्ट में नहीं है, तो पृष्ठ को "कार्ट में जोड़ें" बटन प्रदर्शित करना चाहिए।

इस कार्यक्षमता को लागू करने के लिए, आपको कार्ट में मौजूद वस्तुओं पर नज़र रखनी होगी संदर्भ एपीआई का उपयोग करना और useReducer हुक।

कॉन्टेक्स्ट एपीआई का उपयोग करके शॉपिंग कार्ट बनाना

संदर्भ एपीआई आपको माता-पिता से बच्चे तक मैन्युअल रूप से प्रॉप्स पास किए बिना विभिन्न घटकों में डेटा साझा करने देता है। ये घटक नेविगेशन बार, उत्पाद विवरण पृष्ठ या चेकआउट पृष्ठ हो सकते हैं।

कार्ट कॉन्टेक्स्ट.जेएस नामक एक नई फ़ाइल को कॉन्टेक्स्ट नामक फोल्डर में बनाएं और कॉन्टेक्स्ट बनाएं।

आयात {क्रिएटकॉन्टेक्स्ट} से"प्रतिक्रिया";
निर्यातकॉन्स्ट कार्ट कॉन्टेक्स्ट = क्रिएट कॉन्टेक्स्ट ({
 सामान: [],
});

CartContext डिफ़ॉल्ट मान के रूप में आइटम्स की एक सरणी लेता है।

अगला, संदर्भ प्रदाता बनाएँ। एक संदर्भ प्रदाता उन घटकों को अनुमति देता है जो संदर्भ का उपभोग करते हैं और संदर्भ परिवर्तनों की सदस्यता लेते हैं।

कार्टप्रोवाइडर नामक एक नए फ़ंक्शन में, निम्न जोड़ें:

निर्यातकॉन्स्ट कार्टप्रोवाइडर = ({ बच्चे }) => {
वापस करना<कार्टकॉन्टेक्स्ट। प्रदाता>{बच्चे}कार्टकॉन्टेक्स्ट। प्रदाता>;
};

कार्ट में मौजूद वस्तुओं पर नज़र रखने के लिए, आप यूज़रेड्यूसर हुक का उपयोग करेंगे।

यूजरेड्यूसर हुक यूजस्टेट हुक की तरह काम करता है सिवाय इसके कि यह अधिक जटिल स्टेट लॉजिक को प्रबंधित करने में मदद करता है। यह एक रिड्यूसर फ़ंक्शन और प्रारंभिक अवस्था को स्वीकार करता है। यह वर्तमान स्थिति और एक डिस्पैच फ़ंक्शन लौटाता है जो रिड्यूसर फ़ंक्शन के लिए एक क्रिया करता है।

CartReducer नामक एक नया फ़ंक्शन बनाएं और रिड्यूसर जोड़ें।

कॉन्स्ट कार्टरीड्यूसर = (अवस्था, क्रिया) => {
कॉन्स्ट {प्रकार, पेलोड} = क्रिया;
बदलना (प्रकार) {
मामला"जोड़ना":
वापस करना {
 ...राज्य,
 आइटम: पेलोड.आइटम,
 };
मामला"निकालना":
वापस करना {
 ...राज्य,
 आइटम: पेलोड.आइटम,
 };
गलती करना:
फेंकनानयागलती("उस प्रकार के लिए कोई मामला नहीं");
 }
};

रेड्यूसर फ़ंक्शन में एक स्विच स्टेटमेंट होता है जो कार्रवाई के प्रकार के आधार पर स्थिति को अपडेट करता है। कार्ट रेड्यूसर फ़ंक्शन में "जोड़ें" और "निकालें" क्रियाएं होती हैं जो क्रमशः कार्ट में जोड़ती हैं और कार्ट से हटाती हैं।

रेड्यूसर फ़ंक्शन बनाने के बाद, इसे यूज़रेड्यूसर हुक में उपयोग करें। CartProvider फ़ंक्शन बनाकर प्रारंभ करें। यह वह कार्य है जो अन्य घटकों को संदर्भ प्रदान करेगा।

निर्यातकॉन्स्ट कार्टप्रोवाइडर = ({बच्चे}) => {
वापस करना<कार्टकॉन्टेक्स्ट। प्रदाता>{बच्चे}कार्टकॉन्टेक्स्ट। प्रदाता>;
}

फिर, useReducer हुक बनाएं।

निर्यातकॉन्स्ट कार्टप्रोवाइडर = ({ बच्चे }) => {
कॉन्स्ट [राज्य, प्रेषण] = useReducer (cartReducer, { सामान: [] });
वापस करना<कार्टकॉन्टेक्स्ट। प्रदाता>{बच्चे}कार्टकॉन्टेक्स्ट। प्रदाता>;
};

डिस्पैच फ़ंक्शन कार्ट की स्थिति को अपडेट करने के लिए ज़िम्मेदार है, इसलिए कार्टप्रोवाइडर फ़ंक्शन को उन फ़ंक्शंस को शामिल करने के लिए संशोधित करें जो कार्ट अपडेट होने पर उत्पादों को यूज़रेड्यूसर हुक में भेजते हैं।

आयात {CreateContext, useReducer} से"प्रतिक्रिया";
निर्यातकॉन्स्ट कार्टप्रोवाइडर = ({ बच्चे }) => {
कॉन्स्ट [राज्य, प्रेषण] = useReducer (cartReducer, initialState);
कॉन्स्ट AddToCart = (उत्पाद) => {
कॉन्स्ट अपडेटेडकार्ट = [...राज्य.आइटम, उत्पाद];
 प्रेषण({
 प्रकार: "जोड़ना",
 पेलोड: {
 आइटम: अपडेटेडकार्ट,
 },
 });
 };
कॉन्स्ट रिमूवफ्रॉमकार्ट = (पहचान) => {
कॉन्स्ट अपडेटेडकार्ट = राज्य.आइटम.फ़िल्टर (
 (वर्तमान उत्पाद) => वर्तमान उत्पाद.आईडी! == आईडी
 );
 प्रेषण({
 प्रकार: "निकालना",
 पेलोड: {
 आइटम: अपडेटेडकार्ट,
 },
 });
 };
वापस करना<कार्टकॉन्टेक्स्ट। प्रदाता>{बच्चे}कार्टकॉन्टेक्स्ट। प्रदाता>;
};

AddToCart फ़ंक्शन नए उत्पाद को मौजूदा उत्पादों में जोड़ता है और अद्यतन उत्पादों को डिस्पैच फ़ंक्शन के पेलोड ऑब्जेक्ट में लौटाता है। इसी तरह, रिमूवफ्रॉमकार्ट फ़ंक्शन आईडी द्वारा आइटम को फ़िल्टर करता है और अद्यतन सूची लौटाता है।

आपको कार्टकॉन्टेक्स्ट प्रदाता में वैल्यू प्रोप वापस करने की भी आवश्यकता है।

निर्यातकॉन्स्ट कार्टप्रोवाइडर = ({ बच्चे }) => {
कॉन्स्ट [राज्य, प्रेषण] = useReducer (cartReducer, {
 सामान: [],
 });
कॉन्स्ट AddToCart = (उत्पाद) => {};
कॉन्स्ट रिमूवफ्रॉमकार्ट = (पहचान) => {};
कॉन्स्ट मूल्य = {
 आइटम: राज्य। आइटम,
 कार्ट में जोड़ें,
 रिमूवफ्रॉमकार्ट,
 };
वापस करना<कार्टकॉन्टेक्स्ट। प्रदाताकीमत={कीमत}>{बच्चे}कार्टकॉन्टेक्स्ट। प्रदाता>;
}

वैल्यू प्रोप का उपयोग कॉन्टेक्स्ट हुक के माध्यम से किया जाता है।

कार्ट प्रसंग का उपभोग

अब तक आपने कार्ट कॉन्टेक्स्ट बनाया है और कार्ट को अपडेट करने वाला एक यूजरेड्यूसर फंक्शन बनाया है। इसके बाद, आप useContext हुक का उपयोग करके उत्पाद घटक में कार्ट संदर्भ का उपभोग करेंगे।

पूरे एप्लिकेशन में संदर्भ मान उपलब्ध कराने के लिए संदर्भ प्रदाता के साथ, शीर्ष घटक, index.js को लपेटकर प्रारंभ करें।

आयात {कार्टप्रोवाइडर} से"../context/cartContext";
समारोहMyApp({घटक, पेजप्रॉप्स}) {
वापस करना (


 </CartProvider>
 );
}
निर्यातगलती करना MyApp;

फिर Product.js में useContext हुक और कार्ट संदर्भ प्रदाता आयात करें

आयात {यूज़ कॉन्टेक्स्ट} से"प्रतिक्रिया"
आयात {कार्टकॉन्टेक्स्ट} से"../context/cartContext"
निर्यातगलती करनासमारोहउत्पाद() {
कॉन्स्ट {items, addToCart, removeFromCart} = useContext (CartContext)
वापस करना (
 <>


{नाम}</p>

{कीमत}</p>
कार्ट में जोड़ें</button>
 </div>
 </>
 )
}

बटन फ़ंक्शन इस बात पर निर्भर करता है कि आइटम पहले से कार्ट में है या नहीं। यदि कोई आइटम कार्ट में मौजूद है, तो बटन को उसे कार्ट से हटा देना चाहिए और यदि कोई आइटम पहले से कार्ट में नहीं है, तो उसे जोड़ना चाहिए। इसका मतलब है कि आपको यूजइफेक्ट और यूजस्टेट का उपयोग करके आइटम की स्थिति का ट्रैक रखना होगा। यूजफेक्ट कोड यह जांचता है कि घटक के रेंडर होने के बाद आइटम कार्ट में है या नहीं जबकि यूजस्टेट आइटम की स्थिति को अपडेट करता है।

कॉन्स्ट [मौजूद है, सेटएक्सिस्ट्स] = यूज़स्टेट (असत्य);
उपयोग प्रभाव (() => {
कॉन्स्ट इनकार्ट = आइटम्स.फाइंड ((वस्तु) => आइटम.आईडी आईडी);
अगर (गाड़ी में) {
 सेटएक्सिस्ट्स(सत्य);
 } अन्य {
 सेटएक्सिस्ट्स(असत्य);
 } 
}, [आइटम, आईडी]);

अब, सशर्त प्रतिपादन का प्रयोग करें मौजूदा स्थिति के आधार पर बटन दिखाने के लिए।

वापस करना (


{नाम}</p>

{कीमत}</p>
 {
 मौजूद
? <बटनक्लिक पर={() => removeFromCart (आईडी)}> कार्ट से निकालेंबटन>
: <बटनक्लिक पर={() => addToCart({id, name, price})}>कार्ट में जोड़ेंबटन>
 }
 </div>
)

ध्यान दें कि ऑनक्लिक हैंडलर फ़ंक्शन संदर्भ प्रदाता में परिभाषित रिमूवफ्रॉमकार्ट और ऐडटूकार्ट फ़ंक्शन हैं।

कार्ट में अधिक कार्यात्मकता जोड़ना

आपने सीखा है कि संदर्भ API और useReducer हुक का उपयोग करके शॉपिंग कार्ट कैसे बनाया जाता है।

भले ही इस गाइड में केवल जोड़ने और हटाने की कार्यक्षमता शामिल है, आप कार्ट आइटम की मात्रा को समायोजित करने जैसी अधिक सुविधाओं को जोड़ने के लिए समान अवधारणाओं का उपयोग कर सकते हैं। महत्वपूर्ण बात यह है कि संदर्भ एपीआई को समझें और कार्ट विवरण को अपडेट करने के लिए हुक का उपयोग कैसे करें।