रिएक्ट का अंतर्निर्मित कॉन्टेक्स्ट एपीआई राज्य-साझाकरण के लिए एकदम सही है। Next.js के नवीनतम संस्करण के साथ इसका उपयोग करने का तरीका जानें।

Next.js राज्य प्रबंधन के लिए कई दृष्टिकोण प्रदान करता है। हालाँकि इनमें से कुछ तरीकों के लिए नई लाइब्रेरी स्थापित करने की आवश्यकता होती है, रिएक्ट का कॉन्टेक्स्ट एपीआई अंतर्निहित है, इसलिए यह बाहरी निर्भरता को कम करने का एक शानदार तरीका है।

रिएक्ट कॉन्टेक्स्ट के साथ, आप प्रोप ड्रिलिंग की परेशानी को खत्म करते हुए, अपने घटक पेड़ के विभिन्न हिस्सों के माध्यम से डेटा को निर्बाध रूप से पास कर सकते हैं। यह वर्तमान उपयोगकर्ता की लॉग-इन स्थिति या उनकी पसंदीदा थीम जैसी वैश्विक स्थिति के प्रबंधन के लिए विशेष रूप से उपयोगी है।

रिएक्ट कॉन्टेक्स्ट एपीआई को समझना

कोड में गोता लगाने से पहले, यह महत्वपूर्ण है समझें कि रिएक्ट कॉन्टेक्स्ट एपीआई क्या है और यह किस समस्या का समाधान करता है।

प्रॉप्स घटकों के बीच डेटा साझा करने के लिए एक प्रभावी तरीका प्रदान करते हैं। वे आपको मूल घटक से उसके चाइल्ड घटकों तक डेटा पास करने की अनुमति देते हैं।

यह दृष्टिकोण उपयोगी है क्योंकि यह स्पष्ट रूप से दिखाता है कि कौन से घटक कुछ डेटा का उपयोग करते हैं और वह डेटा घटक ट्री में कैसे प्रवाहित होता है।

instagram viewer

हालाँकि, समस्याएँ तब उत्पन्न होती हैं जब आपके पास गहराई से निहित घटक होते हैं जिन्हें समान प्रॉप्स का उपभोग करने की आवश्यकता होती है। यह स्थिति जटिलताएँ उत्पन्न कर सकती है और संभावित रूप से जटिल कोड का परिणाम हो सकता है जिसे बनाए रखना कठिन है। ये मुद्दे, दूसरों के बीच, हैं प्रोप ड्रिलिंग की कमियां.

रिएक्ट कॉन्टेक्स्ट डेटा बनाने और उपयोग करने के लिए एक केंद्रीकृत विधि प्रदान करके इस चुनौती को हल करता है जिसे वैश्विक स्तर पर, सभी घटकों तक पहुंच की आवश्यकता होती है।

यह इस डेटा को रखने के लिए एक संदर्भ स्थापित करता है, जिससे घटकों को इस तक पहुंचने की अनुमति मिलती है। यह दृष्टिकोण आपके कोडबेस को व्यवस्थित करने में मदद करता है ताकि यह सुनिश्चित हो सके कि यह सुव्यवस्थित है।

आप इस प्रोजेक्ट का कोड इसमें पा सकते हैं GitHub भण्डार.

रिएक्ट कॉन्टेक्स्ट एपीआई का उपयोग करके Next.js 13 में राज्य प्रबंधन के साथ शुरुआत करना

Next.js सर्वर घटक आपको ऐसे एप्लिकेशन बनाने की अनुमति देते हैं जो दोनों दुनियाओं को सर्वश्रेष्ठ बनाते हैं: क्लाइंट-साइड ऐप्स की इंटरैक्टिविटी और सर्वर रेंडरिंग के प्रदर्शन लाभ।

Next.js 13 सर्वर घटकों को लागू करता है अनुप्रयोग निर्देशिका—जो अब स्थिर है—डिफ़ॉल्ट रूप से। हालाँकि, क्योंकि सभी घटक सर्वर-रेंडर किए गए हैं, क्लाइंट-साइड लाइब्रेरीज़ या एपीआई जैसे रिएक्ट कॉन्टेक्स्ट को एकीकृत करते समय आपको समस्याओं का सामना करना पड़ सकता है।

इससे बचने के लिए एक बेहतरीन उपाय है क्लाइंट का उपयोग करें फ़्लैग जिसे आप उन फ़ाइलों पर सेट कर सकते हैं जो क्लाइंट-साइड कोड चलाएँगी।

आरंभ करने के लिए, अपने टर्मिनल में इस कमांड को चलाकर स्थानीय रूप से Next.js 13 प्रोजेक्ट बनाएं:

npx create-next-app@latest next-context-api

प्रोजेक्ट बनाने के बाद, इसकी निर्देशिका पर जाएँ:

cd next-context-api

फिर विकास सर्वर प्रारंभ करें:

npm run dev

एक बार जब आप एक बुनियादी नेक्स्ट.जेएस प्रोजेक्ट स्थापित कर लेते हैं, तो आप एक बुनियादी टू-डू ऐप बना सकते हैं जो राज्य प्रबंधन के लिए रिएक्ट कॉन्टेक्स्ट एपीआई का उपयोग करता है।

संदर्भ प्रदाता बनाएँ

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

एक नई फ़ाइल बनाएं, src/context/Todo.context.js, और इसे निम्नलिखित कोड से भरें।

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

यह रिएक्ट कॉन्टेक्स्ट सेटअप परिभाषित करता है TodoContext जो प्रारंभ में ऐप के लिए एक खाली कार्य सूची की स्थिति रखता है।

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

टोडोकॉन्टेक्स्टप्रोवाइडर घटक प्रदान करता है TodoContext अनुप्रयोग में अन्य घटकों के लिए. यह घटक दो प्रॉप्स लेता है: वैल्यू प्रोप, जो संदर्भ की प्रारंभिक स्थिति है, और रेड्यूसर प्रोप, जो रेड्यूसर फ़ंक्शन है।

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

Next.js ऐप में कॉन्टेक्स्ट प्रदाता जोड़ें

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

ऐसा करने के लिए, खोलें src/app/layout.js निम्नलिखित प्रकार से संदर्भ प्रदाता के साथ HTML टेम्पलेट में चिल्ड्रेन नोड को फ़ाइल करें और लपेटें:

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

एक टू-डू घटक बनाएं

एक नई फ़ाइल बनाएं, स्रोत/घटक/Todo.js, और इसमें निम्नलिखित कोड जोड़ें।

निम्नलिखित आयात करके प्रारंभ करें. को शामिल करना सुनिश्चित करें क्लाइंट का उपयोग करें इस घटक को क्लाइंट-साइड घटक के रूप में चिह्नित करने के लिए ध्वजांकित करें।

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

इसके बाद, कार्यात्मक घटक को परिभाषित करें, जिसमें जेएसएक्स तत्व भी शामिल हैं जो ब्राउज़र पर प्रस्तुत होंगे।

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

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

अंत में, प्रत्येक क्रिया प्रकार के लिए आवश्यक स्थिति चर और आवश्यक हैंडलर फ़ंक्शन को परिभाषित करें। फ़ंक्शन घटक के अंदर, निम्नलिखित कोड जोड़ें।

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

ये हैंडलर फ़ंक्शन संदर्भ की स्थिति के भीतर उपयोगकर्ता के कार्यों को जोड़ने, हटाने और संपादित करने के प्रभारी हैं।

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

टू-डू घटक प्रस्तुत करें

अंत में, टू-डू घटक को पृष्ठ घटक में आयात करें।

ऐसा करने के लिए, src/app निर्देशिका में पेज.जेएस फ़ाइल खोलें, बॉयलरप्लेट नेक्स्ट.जेएस कोड हटाएं, और नीचे कोड जोड़ें:

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

महान! इस बिंदु पर, आपको रिएक्ट कॉन्टेक्स्ट का उपयोग करके To-do Next.js ऐप में स्थिति को प्रबंधित करने में सक्षम होना चाहिए।

अन्य राज्य प्रबंधन तकनीकों के साथ रिएक्ट कॉन्टेक्स्ट एपीआई का उपयोग करना

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

ऐसा करके, आप कुशल और रखरखाव योग्य एप्लिकेशन बनाने के लिए विभिन्न राज्य प्रबंधन समाधानों के लाभों का लाभ उठा सकते हैं।