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

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

इससे पहले कि आप अपनी कार्य सूची शुरू करें

इससे पहले कि आप टू-डू सूची एप्लिकेशन बना सकें, आपको इसकी आवश्यकता होगी:

• का बुनियादी ज्ञान आधुनिक जावास्क्रिप्ट ऑपरेटर और रिएक्ट का यूज़स्टेट हुक.
• कैसे करें की समझ जावास्क्रिप्ट में सरणियों और वस्तुओं को नष्ट करें.
• नोड v16.8 या बाद का संस्करण आपकी स्थानीय मशीन पर स्थापित है और इससे परिचित हैं एनपीएम जैसे पैकेज प्रबंधक या सूत.

आप तैयार प्रोजेक्ट यहां पा सकते हैं GitHub संदर्भ और आगे की खोज के लिए।

अनुप्रयोग स्थिति और प्रबंधन को समझना

एप्लिकेशन स्थिति किसी निश्चित समय पर किसी एप्लिकेशन की वर्तमान स्थिति को संदर्भित करती है। इसमें वह जानकारी शामिल है जिसे ऐप जानता और प्रबंधित करता है, जैसे उपयोगकर्ता इनपुट और डेटाबेस या एपीआई (एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस) से प्राप्त डेटा।

एप्लिकेशन स्थिति को समझने के लिए, एक साधारण काउंटर एप्लिकेशन की संभावित स्थितियों पर विचार करें। वे सम्मिलित करते हैं:

• डिफ़ॉल्ट स्थिति जब काउंटर शून्य पर हो.
• बढ़ी हुई अवस्था जब काउंटर एक से बढ़ जाता है।
• घटी हुई अवस्था जब काउंटर एक से कम हो जाता है।
• एक रीसेट स्थिति जब काउंटर अपनी डिफ़ॉल्ट स्थिति पर वापस आ जाता है।

एक रिएक्ट घटक राज्य में परिवर्तनों की सदस्यता ले सकता है। जब कोई उपयोगकर्ता ऐसे घटक के साथ इंटरैक्ट करता है, तो उसकी गतिविधियां—जैसे बटन क्लिक—स्थिति में अपडेट प्रबंधित कर सकती हैं।

यह स्निपेट अपनी डिफ़ॉल्ट स्थिति में एक सरल काउंटर एप्लिकेशन दिखाता है, जो क्लिक क्रियाओं के आधार पर स्थिति का प्रबंधन करता है:

कॉन्स्ट [काउंटर, सेटकाउंटर] = यूज़स्टेट(0);
वापस करना (

{काउंटर}</h1>
 सेटकाउंटर (काउंटर + 1)}>बढ़ोतरी</button>
 सेटकाउंटर (काउंटर - 1)}>कमी</button>
 सेटकाउंटर(0)}>रीसेट</button>
 </main>
);

सेटअप और इंस्टालेशन

परियोजना के भंडार में दो शाखाएँ हैं: स्टार्टर और प्रसंग. आप प्रोजेक्ट बनाने के लिए आधार के रूप में स्टार्टर शाखा का उपयोग कर सकते हैं या अंतिम डेमो का पूर्वावलोकन करने के लिए संदर्भ शाखा का उपयोग कर सकते हैं।

स्टार्टर ऐप की क्लोनिंग

स्टार्टर ऐप वह यूआई प्रदान करता है जिसकी आपको अंतिम ऐप के लिए आवश्यकता होगी, ताकि आप मुख्य तर्क के कार्यान्वयन पर ध्यान केंद्रित कर सकें। एक टर्मिनल खोलें और रिपॉजिटरी की स्टार्टर शाखा को अपनी स्थानीय मशीन पर क्लोन करने के लिए निम्नलिखित कमांड चलाएँ:

गिट क्लोन -बी स्टार्टर https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

निर्भरताएँ स्थापित करने और अपना विकास सर्वर शुरू करने के लिए, प्रोजेक्ट निर्देशिका के भीतर निम्नलिखित कमांड चलाएँ:

यार्न और यार्न देव

या:

एनपीएम आई && एनपीएम रन डेव

यदि सब कुछ ठीक रहा, तो यूआई आपके ब्राउज़र में प्रदर्शित होना चाहिए:

तर्क को लागू करना

कॉन्टेक्स्ट एपीआई मैन्युअल प्रोप ड्रिलिंग की आवश्यकता के बिना, घटकों में राज्य डेटा को प्रबंधित और साझा करने का एक तरीका प्रदान करता है।

चरण 1: संदर्भ बनाएं और निर्यात करें

एक बनाने के src/app/context संदर्भ फ़ाइल को संग्रहीत करने और प्रोजेक्ट निर्देशिका को सुव्यवस्थित रखने के लिए फ़ोल्डर। इस फ़ोल्डर के अंदर, एक बनाएं todo.context.jsx फ़ाइल जिसमें एप्लिकेशन के लिए सभी संदर्भ तर्क शामिल होंगे।

आयात करें createContext से कार्य करें प्रतिक्रिया लाइब्रेरी बनाएं और परिणाम को एक वेरिएबल में संग्रहीत करते हुए इसे कॉल करें:

आयात {createContext} से"प्रतिक्रिया";
कॉन्स्ट TodoContext = createContext();

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

निर्यातकॉन्स्ट useTodoContext = () => यूज़कॉन्टेक्स्ट (टोडोकॉन्टेक्स्ट);

चरण 2: राज्य बनाएं और प्रबंधित करें

एप्लिकेशन की CRUD (बनाएँ, पढ़ें, अपडेट करें, हटाएँ) क्रियाओं को करने के लिए, आपको स्थितियाँ बनाने और उन्हें प्रबंधित करने की आवश्यकता होगी प्रदाता अवयव।

कॉन्स्ट TodoContextProvider = ({ बच्चे }) => {
कॉन्स्ट [कार्य, सेटटास्क] = उपयोगस्टेट("");
कॉन्स्ट [कार्य, सेट कार्य] = उपयोगस्टेट([]);
वापस करना<TodoContext. प्रदाताकीमत={{}}>{बच्चे}TodoContext. प्रदाता>;
};
निर्यातगलती करना TodoContextProvider;

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

कॉन्स्ट हैंडलटोडोइनपुट = (इनपुट) => सेटटास्क (इनपुट);

एक जोड़ना कार्य बनाएँ फ़ंक्शन जो तब चलेगा जब उपयोगकर्ता कोई कार्य सबमिट करेगा। यह फ़ंक्शन अद्यतन करता है कार्य बताएं और नए कार्य को एक यादृच्छिक आईडी निर्दिष्ट करें।

कॉन्स्ट क्रिएटटास्क = (इ) => {
 e.preventDefault();
 सेटटास्क([
 {
 पहचान: गणित.ट्रंक(गणित।अनियमित() * 1000 + 1),
 काम,
 },
 ...कार्य,
 ]);
 };

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

कॉन्स्ट अद्यतन कार्य = (आईडी, अद्यतन पाठ) =>
 सेटटास्क (टास्क.मैप((टी) => (t.id आईडी? { ...टी, काम: updateText }: t)));

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

कॉन्स्ट डिलीटटास्क = (पहचान) => सेटटास्क (टास्क.फ़िल्टर((टी) => t.id !== id));

चरण 3: प्रदाता में राज्य और हैंडलर जोड़ें

अब आपने राज्य बना लिए हैं और उन्हें प्रबंधित करने के लिए कोड लिखा है, आपको इन राज्यों और हैंडलर फ़ंक्शंस को उपलब्ध कराना होगा प्रदाता. का उपयोग करके आप उन्हें किसी वस्तु के रूप में आपूर्ति कर सकते हैं कीमत की संपत्ति प्रदाता अवयव।

वापस करना (
 मूल्य={{
 काम,
 कार्य,
 हैंडलटूडूइनपुट,
 कार्य बनाएं,
 अद्यतनकार्य,
 डिलीटटास्क,
 }}
 >
 {बच्चे}
 </TodoContext.Provider>
);

चरण 4: संदर्भ का दायरा बढ़ाएँ

प्रदाता संपूर्ण एप्लिकेशन के लिए संदर्भ उपलब्ध कराने के लिए आपके द्वारा बनाए गए शीर्ष-स्तरीय घटक को लपेटना होगा। ऐसा करने के लिए, संपादित करें src/app/page.jsx और लपेटें सब के साथ घटक टोडोकॉन्टेक्स्टप्रोवाइडर अवयव:

;
</TodoContextProvider>;

चरण 5: घटकों में संदर्भ का उपयोग करें

अपना संपादन करें src/app/components/Todos.jsx फ़ाइल और विनाश कार्य, कार्य, हैंडलटूडूइनपुट, और कार्य बनाएँ को कॉल के माध्यम से उपयोगटूडोकॉन्टेक्स्ट समारोह।

कॉन्स्ट { कार्य, कार्य, हैंडलटूडोइनपुट, क्रिएटटास्क } = यूज़टूडोकॉन्टेक्स्ट();

अब, सबमिट इवेंट और मुख्य इनपुट फ़ील्ड में बदलावों को संभालने के लिए फॉर्म तत्व को अपडेट करें:

 क्रिएटटास्क (ई)}>
"कार्य-इनपुट" प्रकार="मूलपाठ" प्लेसहोल्डर="एक कार्य दर्ज करें" आवश्यक मान={कार्य} onChange={(e) => HandleTodoInput (e.target.value)} />
"सबमिट-टूडू" प्रकार="जमा करना" मूल्य="कार्य जोड़ें" />
</form>

चरण 6: यूआई में कार्य प्रस्तुत करें

अब आप किसी कार्य को बनाने और जोड़ने के लिए ऐप का उपयोग कर सकते हैं कार्य सूची। डिस्प्ले को अपडेट करने के लिए, आपको मौजूदा के माध्यम से मैप करना होगा कार्य और उन्हें यूआई में प्रस्तुत करें। सबसे पहले, एक बनाएं src/app/components/Todo.jsx एकल-कार्य आइटम को रखने के लिए घटक।

के अंदर src/app/components/Todo.jsx घटक को लागू करके किसी कार्य को संपादित करें या हटाएं अद्यतन कार्य और कार्य हटाएँ हमारे द्वारा बनाए गए फ़ंक्शन src/app/context/todo.context.jsx फ़ाइल।

आयात प्रतिक्रिया, { उपयोग राज्य } से"प्रतिक्रिया";
आयात { useTodoContext } से"../context/todo.context";
कॉन्स्ट टोडो = ({ काम }) => {
कॉन्स्ट { updateTask, deleteTask } = useTodoContext();
// जब कोई कार्य संपादन मोड में होता है तो isEdit स्थिति ट्रैक होती है
कॉन्स्ट [isEdit, setIsEdit] = उपयोगस्टेट(असत्य);
वापस करना (

"टूडू-रैपर">


 {संपादित करें? ( <इनपुटप्रकार="मूलपाठ"कीमत={कार्य.कार्य}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<वांकक्षा का नाम="काम">{कार्य.कार्य}वां> )}


"कार्य">
"संपादन करना"
 onClick={() => setIsEdit(!isEdit)}> {isEdit? "बचाना": "संपादन करना"} </button> 
 डिलीटटास्क (टास्क.आईडी)}>डेल</button>
 </td>
 </tr>
 </tbody>
 </table>
 );
};



निर्यातगलती करना ऐसा करने के लिए;

प्रस्तुत करने के लिए src/app/components/Todo.jsx प्रत्येक के लिए घटक काम, में जाओ src/app/components/Todos.jsx फ़ाइल और सशर्त रूप से मानचित्र के माध्यम से कार्य के ठीक बाद हैडर समापन टैग.

{कार्य && (

 {कार्य.मानचित्र((कार्य, मैं) => ( <ऐसा करने के लिएचाबी={मैं}काम={काम} /> ))}
</main>
)}

ब्राउज़र में अपने एप्लिकेशन का परीक्षण करें और पुष्टि करें कि यह अपेक्षित परिणाम देता है।

स्थानीय भंडारण में कार्य सहेजा जा रहा है

वर्तमान में, पेज को रीफ्रेश करने से आपके द्वारा बनाए गए सभी कार्यों को हटाकर कार्य रीसेट कर दिए जाएंगे। इस समस्या को ठीक करने का एक तरीका कार्यों को ब्राउज़र के स्थानीय संग्रहण में संग्रहीत करना है।

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