56 KiB

Raw Blame History Unescape Escape

बैंकिङ एप निर्माण भाग ४: स्टेट म्यानेजमेन्टको अवधारणा

प्रि-लेक्चर क्विज

परिचय

स्टेट म्यानेजमेन्टलाई Voyager अन्तरिक्ष यानको नेभिगेसन प्रणालीसँग तुलना गर्न सकिन्छ – जब सबै कुरा ठीकसँग काम गरिरहेको हुन्छ, तपाईंलाई यसको अस्तित्वको महसुस पनि हुँदैन। तर जब समस्या आउँछ, यो अन्तरिक्षको शून्यमा हराउने र अन्तरिक्षको सीमा पुग्ने बीचको फरक बनिन्छ। वेब विकासमा, स्टेटले तपाईंको एप्लिकेशनले सम्झनुपर्ने सबै कुरा प्रतिनिधित्व गर्दछ: प्रयोगकर्ता लगइन स्थिति, फारम डेटा, नेभिगेसन इतिहास, र अस्थायी इन्टरफेस स्टेटहरू।

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

यी खराब कोडिङका संकेत होइनन् – यी प्राकृतिक चुनौतीहरू हुन् जुन एप्लिकेशनहरू निश्चित जटिलता स्तरमा पुग्दा देखा पर्छन्। प्रत्येक विकासकर्ताले यी चुनौतीहरूको सामना गर्छन् जब उनीहरूको एप "प्रूफ अफ कन्सेप्ट" बाट "प्रोडक्सन रेडी" मा परिवर्तन हुन्छ।

यस पाठमा, हामी एक केन्द्रित स्टेट म्यानेजमेन्ट प्रणाली कार्यान्वयन गर्नेछौं जसले तपाईंको बैंकिङ एपलाई एक भरपर्दो, व्यावसायिक एप्लिकेशनमा रूपान्तरण गर्दछ। तपाईंले डेटा प्रवाहलाई पूर्वानुमान योग्य बनाउने, प्रयोगकर्ता सत्रहरू उपयुक्त रूपमा कायम राख्ने, र आधुनिक वेब एप्लिकेशनले आवश्यक पर्ने सहज प्रयोगकर्ता अनुभव सिर्जना गर्न सिक्नुहुनेछ।

पूर्वापेक्षाहरू

स्टेट म्यानेजमेन्ट अवधारणाहरूमा डुबुल्की मार्नुअघि, तपाईंले आफ्नो विकास वातावरण ठीकसँग सेटअप गर्नुपर्नेछ र आफ्नो बैंकिङ एपको आधार तयार गर्नुपर्नेछ। यो पाठ यस श्रृंखलाका अघिल्ला भागहरूका अवधारणाहरू र कोडमा सीधा निर्माण गर्दछ।

पाठ अघि निम्न कम्पोनेन्टहरू तयार गर्नुहोस्:

आवश्यक सेटअप:

डेटा फेचिङ पाठ पूरा गर्नुहोस् - तपाईंको एपले खाता डेटा सफलतापूर्वक लोड र प्रदर्शन गर्नुपर्छ
Node.js आफ्नो प्रणालीमा स्थापना गर्नुहोस् ब्याकएन्ड API चलाउन
खाता डेटा अपरेशनहरू ह्यान्डल गर्न सर्भर API स्थानीय रूपमा सुरु गर्नुहोस्

आफ्नो वातावरण परीक्षण गर्नुहोस्:

तपाईंको API सर्भर सही रूपमा चलिरहेको छ भनेर यो कमाण्ड टर्मिनलमा चलाएर पुष्टि गर्नुहोस्:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

यो कमाण्डले के गर्छ:

GET अनुरोध पठाउँछ तपाईंको स्थानीय API सर्भरमा
कनेक्शन परीक्षण गर्छ र सर्भर प्रतिक्रिया दिइरहेको छ भनी पुष्टि गर्छ
API संस्करण जानकारी फर्काउँछ यदि सबै ठीक छ भने

हालको स्टेट समस्याहरूको निदान

जस्तै Sherlock Holmes अपराध स्थलको जाँच गर्दैछ, हामीले हाम्रो हालको कार्यान्वयनमा के भइरहेको छ भनेर ठीकसँग बुझ्न आवश्यक छ ताकि प्रयोगकर्ता सत्र हराउने रहस्य समाधान गर्न सकियोस्।

हामी एउटा साधारण प्रयोग गर्नेछौं जसले आधारभूत स्टेट म्यानेजमेन्ट चुनौतीहरू प्रकट गर्दछ:

🧪 यो डायग्नोस्टिक परीक्षण प्रयास गर्नुहोस्:

आफ्नो बैंकिङ एपमा लगइन गर्नुहोस् र ड्यासबोर्डमा जानुहोस्
ब्राउजर पृष्ठ रिफ्रेस गर्नुहोस्
आफ्नो लगइन स्थिति के हुन्छ हेर्नुहोस्

यदि तपाईंलाई पुन: लगइन स्क्रिनमा पुनःनिर्देशित गरिन्छ भने, तपाईंले क्लासिक स्टेट पर्सिस्टेन्स समस्याको खोजी गर्नुभएको छ। यो व्यवहार हुन्छ किनकि हाम्रो हालको कार्यान्वयनले प्रयोगकर्ता डेटा JavaScript भेरिएबलहरूमा भण्डारण गर्छ जुन प्रत्येक पृष्ठ लोडसँग रिसेट हुन्छ।

हालको कार्यान्वयन समस्याहरू:

हाम्रो अघिल्लो पाठ बाट साधारण account भेरिएबलले तीन प्रमुख समस्याहरू सिर्जना गर्दछ जसले प्रयोगकर्ता अनुभव र कोड मर्मतयोग्यतालाई असर गर्छ:

समस्या	प्राविधिक कारण	प्रयोगकर्तामा प्रभाव
सत्र हराउने	पृष्ठ रिफ्रेस गर्दा JavaScript भेरिएबलहरू मेटिन्छन्	प्रयोगकर्ताहरूलाई बारम्बार पुन: प्रमाणित गर्नुपर्छ
छरिएको अपडेटहरू	धेरै फङ्सनहरूले स्टेटलाई सिधै परिवर्तन गर्छन्	डिबग गर्न गाह्रो हुन्छ
अधुरो सफाइ	लगआउट गर्दा सबै स्टेट सन्दर्भहरू मेटिँदैनन्	सम्भावित सुरक्षा र गोपनीयता चिन्ता

आर्किटेक्चरल चुनौती:

जस्तै Titanic को कम्पार्टमेन्टलाइज्ड डिजाइन बलियो देखिन्थ्यो तर धेरै कम्पार्टमेन्टहरू एकसाथ बाढी हुँदा कमजोर भयो, यी समस्याहरूलाई व्यक्तिगत रूपमा समाधान गर्दा आधारभूत आर्किटेक्चरल समस्यालाई सम्बोधन गर्दैन। हामीलाई एक व्यापक स्टेट म्यानेजमेन्ट समाधान चाहिन्छ।

💡 हामी यहाँ के हासिल गर्न खोज्दैछौं?

स्टेट म्यानेजमेन्ट वास्तवमा दुई आधारभूत पहेलाहरू समाधान गर्ने बारे हो:

मेरो डेटा कहाँ छ?: हामीसँग के जानकारी छ र यो कहाँबाट आएको छ भनेर ट्र्याक राख्ने
सबैजना एउटै पृष्ठमा छन्?: सुनिश्चित गर्ने कि प्रयोगकर्ताहरूले देखेको कुरा वास्तवमा भइरहेको कुरासँग मेल खाउँछ

हाम्रो योजना:

हामी हाम्रो टाउको घुमाउने सट्टा, एक केन्द्रित स्टेट म्यानेजमेन्ट प्रणाली सिर्जना गर्नेछौं। यसलाई सबै महत्त्वपूर्ण कुराहरूको जिम्मा लिने एकदमै व्यवस्थित व्यक्तिको रूपमा सोच्नुहोस्:

यस डेटा प्रवाहलाई बुझ्दै:

केन्द्रित बनाउँछ सबै एप्लिकेशन स्टेटलाई एक स्थानमा
मार्गनिर्देशन गर्छ सबै स्टेट परिवर्तनहरू नियन्त्रित फङ्सनहरू मार्फत
सुनिश्चित गर्छ कि UI हालको स्टेटसँग समक्रमित रहन्छ
स्पष्ट, पूर्वानुमान योग्य ढाँचा प्रदान गर्छ डेटा म्यानेजमेन्टका लागि

💡 व्यावसायिक दृष्टिकोण: यो पाठ आधारभूत अवधारणाहरूमा केन्द्रित छ। जटिल एप्लिकेशनहरूको लागि, Redux जस्ता लाइब्रेरीहरूले थप उन्नत स्टेट म्यानेजमेन्ट सुविधाहरू प्रदान गर्छ। यी कोर सिद्धान्तहरू बुझ्दा तपाईं कुनै पनि स्टेट म्यानेजमेन्ट लाइब्रेरीमा महारत हासिल गर्न सक्नुहुन्छ।

⚠️ उन्नत विषय: हामी स्टेट परिवर्तनहरूद्वारा ट्रिगर गरिएका स्वचालित UI अपडेटहरू कभर गर्ने छैनौं, किनकि यसमा Reactive Programming अवधारणाहरू समावेश छन्। यो तपाईंको सिकाइ यात्राको लागि उत्कृष्ट अर्को चरण मान्न सकिन्छ!

कार्य: स्टेट संरचना केन्द्रित गर्नुहोस्

हामी हाम्रो छरिएको स्टेट म्यानेजमेन्टलाई केन्द्रित प्रणालीमा रूपान्तरण गर्न सुरु गरौं। यो पहिलो चरणले सबै सुधारहरूको आधार स्थापना गर्दछ।

चरण १: केन्द्रित स्टेट वस्तु सिर्जना गर्नुहोस्

साधारण account घोषणा प्रतिस्थापन गर्नुहोस्:

let account = null;

एक संरचित स्टेट वस्तु प्रयोग गरेर:

let state = {
  account: null
};

यो परिवर्तन किन महत्त्वपूर्ण छ:

केन्द्रित बनाउँछ सबै एप्लिकेशन डेटा एक स्थानमा
तयार गर्छ संरचना थप स्टेट गुणहरू थप्नका लागि
स्पष्ट सीमा सिर्जना गर्छ स्टेट र अन्य भेरिएबलहरू बीच
ढाँचा स्थापना गर्छ जसले तपाईंको एप बढ्दै जाँदा स्केल गर्छ

चरण २: स्टेट पहुँच ढाँचा अपडेट गर्नुहोस्

तपाईंको फङ्सनहरूलाई नयाँ स्टेट संरचना प्रयोग गर्न अपडेट गर्नुहोस्:

register() र login() फङ्सनहरूमा, प्रतिस्थापन गर्नुहोस्:

account = ...

यससँग:

state.account = ...

updateDashboard() फङ्सनमा, माथि यो लाइन थप्नुहोस्:

const account = state.account;

यी अपडेटहरूले के हासिल गर्छ:

अस्तित्वमा रहेको कार्यक्षमता कायम राख्छ जबकि संरचना सुधार गर्छ
तयार गर्छ तपाईंको कोडलाई थप परिष्कृत स्टेट म्यानेजमेन्टका लागि
**स्टेट डेटा पहुँच गर्नको लागि स्थिर ढाँचा सिर्जना गर्छ
**केन्द्रित स्टेट अपडेटहरूको आधार स्थापना गर्छ

💡 नोट: यो पुन: संरचना तुरुन्तै हाम्रो समस्याहरू समाधान गर्दैन, तर यो शक्तिशाली सुधारहरूको लागि आवश्यक आधार सिर्जना गर्छ!

नियन्त्रित स्टेट अपडेटहरू कार्यान्वयन गर्दै

हाम्रो स्टेट केन्द्रित भएपछि, अर्को चरणले डेटा परिमार्जनका लागि नियन्त्रित संयन्त्रहरू स्थापना गर्न समावेश गर्दछ। यो दृष्टिकोणले पूर्वानुमान योग्य स्टेट परिवर्तनहरू र सजिलो डिबग सुनिश्चित गर्दछ।

मुख्य सिद्धान्त एयर ट्राफिक कन्ट्रोलसँग मिल्दोजुल्दो छ: धेरै फङ्सनहरूलाई स्वतन्त्र रूपमा स्टेट परिवर्तन गर्न अनुमति दिनुको सट्टा, हामी सबै परिवर्तनहरू एकल, नियन्त्रित फङ्सन मार्फत च्यानल गर्नेछौं। यस ढाँचाले डेटा परिवर्तन कहिले र कसरी हुन्छ भन्ने स्पष्ट निरीक्षण प्रदान गर्दछ।

इम्युटेबल स्टेट म्यानेजमेन्ट:

हामी हाम्रो state वस्तुलाई इम्युटेबल को रूपमा व्यवहार गर्नेछौं, जसको अर्थ हामी यसलाई सिधै परिवर्तन गर्दैनौं। यसको सट्टा, प्रत्येक परिवर्तनले अपडेट गरिएको डेटा सहित नयाँ स्टेट वस्तु सिर्जना गर्छ।

यो दृष्टिकोण प्रत्यक्ष परिमार्जनको तुलनामा सुरुमा अप्रभावी लाग्न सक्छ, तर यसले डिबगिङ, परीक्षण, र एप्लिकेशन पूर्वानुमान योग्यतालाई कायम राख्न महत्त्वपूर्ण फाइदाहरू प्रदान गर्दछ।

इम्युटेबल स्टेट म्यानेजमेन्टका फाइदाहरू:

फाइदा	विवरण	प्रभाव
पूर्वानुमानयोग्यता	परिवर्तनहरू केवल नियन्त्रित फङ्सनहरू मार्फत हुन्छन्	डिबग र परीक्षण गर्न सजिलो
इतिहास ट्र्याकिङ	प्रत्येक स्टेट परिवर्तनले नयाँ वस्तु सिर्जना गर्छ	Undo/Redo कार्यक्षमता सक्षम गर्छ
साइड इफेक्ट रोकथाम	कुनै अनपेक्षित परिमार्जन हुँदैन	रहस्यमय बगहरू रोक्छ
प्रदर्शन अनुकूलन	स्टेट वास्तवमा परिवर्तन भएको छ कि छैन भनेर सजिलै पत्ता लगाउन सकिन्छ	प्रभावकारी UI अपडेट सक्षम गर्छ

JavaScript इम्युटेबिलिटी Object.freeze() को साथ:

JavaScript ले Object.freeze() प्रदान गर्दछ जसले वस्तु परिमार्जन रोक्छ:

const immutableState = Object.freeze({ account: userData });
// Any attempt to modify immutableState will throw an error

यहाँ के हुन्छ भन्ने कुरा तोड्दै:

प्रत्यक्ष सम्पत्ति असाइनमेन्ट वा मेटाउने रोक्छ
परिमार्जन प्रयासहरू गरिएमा अपवादहरू फाल्छ
स्टेट परिवर्तनहरू नियन्त्रित फङ्सनहरू मार्फत जानुपर्छ भनी सुनिश्चित गर्छ
स्टेट अपडेट गर्नको लागि स्पष्ट सम्झौता सिर्जना गर्छ

💡 गहिरो अध्ययन: MDN डकुमेन्टेशन मा शालो र डीप इम्युटेबल वस्तुहरू बीचको भिन्नता बारे जान्नुहोस्। जटिल स्टेट संरचनाहरूका लागि यो भिन्नता बुझ्नु महत्त्वपूर्ण छ।

कार्य

नयाँ updateState() फङ्सन सिर्जना गरौं:

function updateState(property, newData) {
  state = Object.freeze({
    ...state,
    [property]: newData
  });
}

यस फङ्सनमा, हामी नयाँ स्टेट वस्तु सिर्जना गर्दैछौं र स्प्रेड (...) अपरेटर प्रयोग गरेर अघिल्लो स्टेटबाट डेटा प्रतिलिपि गर्दैछौं। त्यसपछि हामी स्टेट वस्तुको विशेष सम्पत्तिलाई नयाँ डेटा प्रयोग गरेर ब्र्याकेट नोटेशन [property] प्रयोग गरेर ओभरराइड गर्छौं। अन्तमा, हामी Object.freeze() प्रयोग गरेर वस्तु लक गर्छौं ताकि परिमार्जन रोक्न सकियोस्। अहिले हामीसँग account सम्पत्ति मात्र स्टेटमा भण्डारण गरिएको छ, तर यस दृष्टिकोणले तपाईंलाई स्टेटमा आवश्यक जति सम्पत्तिहरू थप्न अनुमति दिन्छ।

हामी state आरम्भलाई पनि अपडेट गर्नेछौं ताकि प्रारम्भिक स्टेट पनि फ्रिज गरिएको हो भनी सुनिश्चित गर्न सकियोस्:

let state = Object.freeze({
  account: null
});

त्यसपछि, register फङ्सनलाई state.account = result; असाइनमेन्ट प्रतिस्थापन गरेर अपडेट गर्नुहोस्:

updateState('account', result);

login फङ्सनमा पनि त्यस्तै गर्नुहोस्, state.account = data; लाई प्रतिस्थापन गरेर:

updateState('account', data);

हामी अब प्रयोगकर्ताले Logout क्लिक गर्दा खाता डेटा मेटिने समस्या समाधान गर्ने मौका लिनेछौं।

नयाँ logout() फङ्सन सिर्जना गर्नुहोस्:

function logout() {
  updateState('account', null);
  navigate('/login');
}

updateDashboard() मा, return navigate('/login'); पुन:निर्देशनलाई return logout(); सँग प्रतिस्थापन गर्नुहोस्।

नयाँ खाता दर्ता गर्ने, लगआउट गर्ने र फेरि लगइन गर्ने प्रयास गर्नुहोस् ताकि सबै कुरा अझै सही रूपमा काम गरिरहेको छ भनी जाँच गर्न सकियोस्।

टिप: तपाईंले सबै स्टेट परिवर्तनहरू हेर्न updateState() को तल console.log(state) थप्न सक्नुहुन्छ र आफ्नो ब्राउजरको विकास उपकरणमा कन्सोल खोल्न सक्नुहुन्छ।

डेटा पर्सिस्टेन्स कार्यान्वयन गर्दै

हामीले पहिचान गरेको सत्र हराउने समस्याले ब्राउजर सत्रहरूमा प्रयोगकर्ता स्टेट कायम राख्ने पर्सिस्टेन्स समाधान आवश्यक छ। यसले हाम्रो एप्लिकेशनलाई अस्थायी अनुभवबाट एक भरपर्दो, व्यावसायिक उपकरणमा रूपान्तरण गर्दछ।

जस्तै परमाणु घडीहरूले पावर आउटेजको माध्यमबाट पनि सटीक समय कायम राख्छन्, महत्त्वपूर्ण स्टेटलाई गैर-वोलाटाइल मेमोरीमा भण्डारण गरेर, वेब एप्लिकेशनहरूले ब्राउजर सत्रहरू र पृष्ठ रिफ्रेसहरूमा आवश्यक प्रयोगकर्ता डेटा कायम राख्न पर्सिस्टेन्ट स्टोरेज संयन्त्रहरू आवश्यक छ।

डेटा पर्सिस्टेन्सका लागि रणनीतिक प्रश्नहरू:

पर्सिस्टेन्स कार्यान्वयन गर्नु अघि, यी महत्त्वपूर्ण कारकहरू विचार गर्नुहोस्:

प्रश्न	बैंकिङ एप सन्दर्भ	निर्णय प्रभाव
डेटा संवेदनशील छ?	खाता ब्यालेन्स, लेनदेन इतिहास	सुरक्षित भण्डारण विधिहरू चयन गर्नुहोस्
कति समयसम्म यो कायम रहनुपर्छ?	लगइन स्थिति बनाम अस्थायी UI प्राथमिकताहरू	उपयुक्त भण्डारण अवधि चयन गर्नुहोस्
सर्भरलाई यो चाहिन्छ?	प्रमाणिकरण टोकन बनाम UI सेटिङहरू	साझेदारी आवश्यकताहरू निर्धारण गर्नुहोस्

ब्राउजर स्टोरेज विकल्पहरू:

आधुनिक ब्राउजरहरूले विभिन्न उपयोगका लागि डिजाइन गरिएका धेरै स्टोरेज संयन्त्रहरू प्रदान गर्छन्:

प्राथमिक स्टोरेज APIहरू:

localStorage: स्थायी Key/Value स्टोरेज
- स्थायी बनाउँछ डेटा ब्राउजर सत्रहरूमा अनिश्चितकालसम्म
- ब्राउजर पुनःसुरु र कम्प्युटर पुनःसुरुमा पनि टिक्छ
- विशिष्ट वेबसाइट डोमेनमा सीमित
- लगइन स्थिति र प्रयोगकर्ता प्राथमिकताहरूका लागि उपयुक्त
sessionStorage: अस्थायी सत्र स्टोरेज
- localStorage जस्तै कार्य गर्दछ सक्रिय सत्रहरूमा
- स्वचालित रूपमा मेटिन्छ जब ब्राउजर ट्याब बन्द हुन्छ
- अस्थायी डेटा जसले टिक्नुपर्दैनका लागि आदर्श
HTTP Cookies: सर्भर-साझा स्टोरेज
- स्वचालित रूपमा पठाइन्छ प्रत्येक सर्भ

💡 उन्नत विकल्प: ठूला डेटासेटसहित जटिल अफलाइन एप्लिकेसनहरूको लागि, IndexedDB API प्रयोग गर्न विचार गर्नुहोस्। यसले पूर्ण क्लाइन्ट-साइड डाटाबेस प्रदान गर्दछ तर थप जटिल कार्यान्वयन आवश्यक छ।

कार्य: `localStorage` Persistence लागू गर्नुहोस्

हामी स्थायी भण्डारण लागू गर्नेछौं ताकि प्रयोगकर्ताहरू स्पष्ट रूपमा लगआउट नगरेसम्म लगइन रहन सकून्। ब्राउजर सत्रहरूमा खाता डेटा भण्डारण गर्न localStorage प्रयोग गरिनेछ।

चरण १: भण्डारण कन्फिगरेसन परिभाषित गर्नुहोस्

const storageKey = 'savedAccount';

यस स्थिरांकले के प्रदान गर्छ:

हाम्रो भण्डारण गरिएको डेटा लागि एक सुसंगत पहिचानकर्ता सिर्जना गर्छ
भण्डारण कुञ्जी सन्दर्भहरूमा टाइपोहरू रोक्छ
आवश्यक परे भण्डारण कुञ्जी परिवर्तन गर्न सजिलो बनाउँछ
मर्मतयोग्य कोडको लागि उत्तम अभ्यासहरू अनुसरण गर्छ

चरण २: स्वचालित Persistence थप्नुहोस्

updateState() फङ्सनको अन्त्यमा यो लाइन थप्नुहोस्:

localStorage.setItem(storageKey, JSON.stringify(state.account));

यहाँ के हुन्छ भन्ने व्याख्या:

खाता वस्तुलाई JSON स्ट्रिङमा रूपान्तरण गरेर भण्डारणको लागि तयार गर्छ
हाम्रो सुसंगत भण्डारण कुञ्जी प्रयोग गरेर डेटा सुरक्षित गर्छ
स्वचालित रूपमा कार्यान्वयन हुन्छ जब राज्य परिवर्तन हुन्छ
सुनिश्चित गर्छ कि भण्डारण गरिएको डेटा सधैं वर्तमान राज्यसँग समकालिक छ

💡 आर्किटेक्चर लाभ: किनकि हामीले सबै राज्य अपडेटहरू updateState() मार्फत केन्द्रित गरेका छौं, Persistence थप्न केवल एक लाइन कोड आवश्यक थियो। यसले राम्रो आर्किटेक्चरल निर्णयको शक्ति देखाउँछ!

चरण ३: एप लोडमा राज्य पुनर्स्थापना गर्नुहोस्

सुरक्षित डेटा पुनर्स्थापना गर्न एक Initialization फङ्सन सिर्जना गर्नुहोस्:

function init() {
  const savedAccount = localStorage.getItem(storageKey);
  if (savedAccount) {
    updateState('account', JSON.parse(savedAccount));
  }

  // Our previous initialization code
  window.onpopstate = () => updateRoute();
  updateRoute();
}

init();

Initialization प्रक्रियाको समझ:

localStorage बाट पहिले सुरक्षित गरिएको खाता डेटा पुनःप्राप्त गर्छ
JSON स्ट्रिङलाई फेरी JavaScript वस्तुमा पार्स गर्छ
हाम्रो नियन्त्रण गरिएको अपडेट फङ्सन प्रयोग गरेर राज्य अपडेट गर्छ
पृष्ठ लोडमा प्रयोगकर्ताको सत्र स्वचालित रूपमा पुनर्स्थापना गर्छ
रुट अपडेटहरू अघि कार्यान्वयन हुन्छ ताकि राज्य उपलब्ध होस्

चरण ४: डिफल्ट रुटलाई अनुकूलित गर्नुहोस्

Persistence को फाइदा लिन डिफल्ट रुट अपडेट गर्नुहोस्:

updateRoute() मा, प्रतिस्थापन गर्नुहोस्:

// Replace: return navigate('/login');
return navigate('/dashboard');

किन यो परिवर्तन उपयुक्त छ:

हाम्रो नयाँ Persistence प्रणालीलाई प्रभावकारी रूपमा प्रयोग गर्छ
ड्यासबोर्डलाई प्रमाणीकरण जाँचहरू ह्यान्डल गर्न अनुमति दिन्छ
यदि कुनै सुरक्षित सत्र छैन भने स्वचालित रूपमा लगइनमा पुनर्निर्देशन गर्छ
प्रयोगकर्ताको अनुभवलाई अझ सहज बनाउँछ

तपाईंको कार्यान्वयन परीक्षण गर्नुहोस्:

आफ्नो बैंकिङ एपमा लगइन गर्नुहोस्
ब्राउजर पृष्ठ रिफ्रेस गर्नुहोस्
सुनिश्चित गर्नुहोस् कि तपाईं ड्यासबोर्डमा लगइन रहनुभएको छ
आफ्नो ब्राउजर बन्द गर्नुहोस् र पुनः खोल्नुहोस्
आफ्नो एपमा फर्केर जानुहोस् र पुष्टि गर्नुहोस् कि तपाईं अझै लगइन हुनुहुन्छ

🎉 उपलब्धि प्राप्त भयो: तपाईंले सफलतापूर्वक स्थायी राज्य व्यवस्थापन लागू गर्नुभयो! अब तपाईंको एपले व्यावसायिक वेब एप्लिकेसन जस्तै व्यवहार गर्छ।

Persistence र डेटा ताजगीको सन्तुलन

हाम्रो Persistence प्रणालीले प्रयोगकर्ता सत्रहरू सफलतापूर्वक कायम राख्छ, तर नयाँ चुनौती प्रस्तुत गर्दछ: डेटा पुरानो हुने समस्या। जब धेरै प्रयोगकर्ताहरू वा एप्लिकेसनहरूले एउटै सर्भर डेटा परिवर्तन गर्छन्, स्थानीय क्यास गरिएको जानकारी पुरानो हुन्छ।

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

🧪 डेटा ताजगी समस्या पत्ता लगाउँदै:

test खाता प्रयोग गरेर ड्यासबोर्डमा लगइन गर्नुहोस्
अर्को स्रोतबाट लेनदेनको नक्कल गर्न टर्मिनलमा यो कमाण्ड चलाउनुहोस्:

curl --request POST \
     --header "Content-Type: application/json" \
     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
     http://localhost:5000/api/accounts/test/transactions

आफ्नो ब्राउजरमा ड्यासबोर्ड पृष्ठ रिफ्रेस गर्नुहोस्
नयाँ लेनदेन देख्न सक्नुहुन्छ कि छैन हेर्नुहोस्

यो परीक्षणले के देखाउँछ:

देखाउँछ कि localStorage "पुरानो" (अप्रचलित) हुन सक्छ
नक्कल गर्छ वास्तविक संसारको परिदृश्य जहाँ डेटा परिवर्तनहरू तपाईंको एप बाहिर हुन्छन्
Persistence र डेटा ताजगी बीचको तनाव प्रकट गर्छ

डेटा पुरानो हुने चुनौती:

समस्या	कारण	प्रयोगकर्तामा प्रभाव
पुरानो डेटा	`localStorage` स्वतः समाप्त हुँदैन	प्रयोगकर्ताहरूले अप्रचलित जानकारी देख्छन्
सर्भर परिवर्तनहरू	अन्य एप्स/प्रयोगकर्ताहरूले एउटै डेटा परिवर्तन गर्छन्	प्लेटफर्महरूमा असंगत दृश्यहरू
क्यास बनाम वास्तविकता	स्थानीय क्यास सर्भर राज्यसँग मेल खाँदैन	खराब प्रयोगकर्ता अनुभव र भ्रम

समाधान रणनीति:

हामी "लोडमा रिफ्रेस" ढाँचा लागू गर्नेछौं जसले Persistence को फाइदाहरू र ताजा डेटा आवश्यकताको सन्तुलन कायम राख्छ। यसले सहज प्रयोगकर्ता अनुभव कायम राख्दै डेटा शुद्धता सुनिश्चित गर्दछ।

कार्य: डेटा रिफ्रेस प्रणाली लागू गर्नुहोस्

हामी एक प्रणाली सिर्जना गर्नेछौं जसले सर्भरबाट स्वचालित रूपमा ताजा डेटा प्राप्त गर्छ र हाम्रो स्थायी राज्य व्यवस्थापनको फाइदाहरू कायम राख्छ।

चरण १: खाता डेटा अपडेटर सिर्जना गर्नुहोस्

async function updateAccountData() {
  const account = state.account;
  if (!account) {
    return logout();
  }

  const data = await getAccount(account.user);
  if (data.error) {
    return logout();
  }

  updateState('account', data);
}

यस फङ्सनको तर्कको समझ:

जाँच्छ कि प्रयोगकर्ता हाल लगइन छ कि छैन (state.account अवस्थित छ)
यदि कुनै मान्य सत्र फेला परेन भने लगआउटमा पुनर्निर्देशन गर्छ
getAccount() फङ्सन प्रयोग गरेर सर्भरबाट ताजा खाता डेटा प्राप्त गर्छ
सर्भर त्रुटिहरूलाई राम्रोसँग ह्यान्डल गरेर अमान्य सत्रहरूबाट लगआउट गर्छ
हाम्रो नियन्त्रण गरिएको अपडेट प्रणाली प्रयोग गरेर राज्यलाई ताजा डेटा अपडेट गर्छ
updateState() फङ्सन मार्फत स्वचालित localStorage Persistence ट्रिगर गर्छ

चरण २: ड्यासबोर्ड रिफ्रेस ह्यान्डलर सिर्जना गर्नुहोस्

async function refresh() {
  await updateAccountData();
  updateDashboard();
}

यो रिफ्रेस फङ्सनले के पूरा गर्छ:

डेटा रिफ्रेस र UI अपडेट प्रक्रियालाई समन्वय गर्छ
प्रदर्शन अपडेट गर्नु अघि ताजा डेटा लोड गर्न पर्खन्छ
सुनिश्चित गर्छ कि ड्यासबोर्डले सबैभन्दा वर्तमान जानकारी देखाउँछ
डेटा व्यवस्थापन र UI अपडेटहरू बीचको स्पष्ट छुट्टै राख्छ

चरण ३: रुट प्रणालीसँग एकीकृत गर्नुहोस्

रुट कन्फिगरेसन अपडेट गरेर रिफ्रेस स्वचालित रूपमा ट्रिगर गर्नुहोस्:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: refresh }
};

यो एकीकरण कसरी काम गर्छ:

ड्यासबोर्ड रुट लोड हुँदा हरेक पटक रिफ्रेस फङ्सन कार्यान्वयन गर्छ
प्रयोगकर्ताहरू ड्यासबोर्डमा नेभिगेट गर्दा ताजा डेटा सधैं प्रदर्शन हुन्छ
डेटा ताजगी थप्दै अवस्थित रुट संरचना मेन्टेन गर्छ
रुट-विशिष्ट Initialization को लागि एक सुसंगत ढाँचा प्रदान गर्छ

तपाईंको डेटा रिफ्रेस प्रणाली परीक्षण गर्नुहोस्:

आफ्नो बैंकिङ एपमा लगइन गर्नुहोस्
नयाँ लेनदेन सिर्जना गर्न पहिलेको curl कमाण्ड चलाउनुहोस्
आफ्नो ड्यासबोर्ड पृष्ठ रिफ्रेस गर्नुहोस् वा टाढा गएर फेरी फर्कनुहोस्
नयाँ लेनदेन तुरुन्तै देखिन्छ कि छैन सुनिश्चित गर्नुहोस्

🎉 सन्तुलन प्राप्त भयो: अब तपाईंको एपले स्थायी राज्यको सहज अनुभव र सर्भर डेटा ताजगीको सटीकता संयोजन गर्दछ!

GitHub Copilot Agent चुनौती 🚀

Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: बैंकिङ एपको लागि Undo/Redo कार्यक्षमता सहित व्यापक राज्य व्यवस्थापन प्रणाली लागू गर्नुहोस्। यो चुनौतीले तपाईंलाई उन्नत राज्य व्यवस्थापन अवधारणाहरू अभ्यास गर्न मद्दत गर्नेछ जसमा राज्य इतिहास ट्र्याकिङ, अपरिवर्तनीय अपडेटहरू, र प्रयोगकर्ता इन्टरफेस समक्रमण समावेश छ।

प्रेरणा: उन्नत राज्य व्यवस्थापन प्रणाली सिर्जना गर्नुहोस् जसमा समावेश छ: १) सबै अघिल्लो अवस्थाहरू ट्र्याक गर्ने राज्य इतिहास एरे, २) अघिल्लो अवस्थाहरूमा फर्कन सक्ने Undo र Redo फङ्सनहरू, ३) ड्यासबोर्डमा Undo/Redo अपरेसनका लागि UI बटनहरू, ४) मेमोरी समस्याहरू रोक्न १० अवस्थाको अधिकतम इतिहास सीमा, र ५) प्रयोगकर्ताले लगआउट गर्दा इतिहासको उचित सफाइ। सुनिश्चित गर्नुहोस् कि Undo/Redo कार्यक्षमता खाता ब्यालेन्स परिवर्तनहरूसँग काम गर्छ र ब्राउजर रिफ्रेसहरूमा कायम रहन्छ।

Agent मोड को बारेमा यहाँ थप जान्नुहोस्।

🚀 चुनौती: भण्डारण अनुकूलन

तपाईंको कार्यान्वयनले अब प्रयोगकर्ता सत्रहरू, डेटा रिफ्रेस, र राज्य व्यवस्थापन प्रभावकारी रूपमा ह्यान्डल गर्छ। तर, विचार गर्नुहोस् कि हाम्रो वर्तमान दृष्टिकोणले भण्डारण दक्षता र कार्यक्षमताको सन्तुलन उत्तम रूपमा कायम राख्छ कि राख्दैन।

जस्तै शतरंजका मास्टरहरूले आवश्यक टुक्राहरू र बलिदान गर्न मिल्ने प्यादाहरू बीच भिन्नता गर्छन्, प्रभावकारी राज्य व्यवस्थापनले कुन डेटा स्थायी रहनुपर्छ र कुन सधैं सर्भरबाट ताजा हुनुपर्छ भनेर पहिचान गर्न आवश्यक छ।

अनुकूलन विश्लेषण:

तपाईंको वर्तमान localStorage कार्यान्वयन मूल्याङ्कन गर्नुहोस् र यी रणनीतिक प्रश्नहरू विचार गर्नुहोस्:

प्रयोगकर्ता प्रमाणीकरण कायम राख्नको लागि न्यूनतम जानकारी के हो?
कुन डेटा यति बारम्बार परिवर्तन हुन्छ कि स्थानीय क्यासिङले थोरै फाइदा प्रदान गर्छ?
भण्डारण अनुकूलनले प्रदर्शन सुधार गर्न कसरी प्रयोगकर्ता अनुभवलाई बिगार्न बिना मद्दत गर्न सक्छ?

कार्यान्वयन रणनीति:

पहिचान गर्नुहोस् कि स्थायी रहनुपर्ने आवश्यक डेटा (संभवतः केवल प्रयोगकर्ता पहिचान)
आफ्नो localStorage कार्यान्वयनलाई केवल महत्वपूर्ण सत्र डेटा भण्डारण गर्न परिवर्तन गर्नुहोस्
ड्यासबोर्ड भ्रमणमा सर्भरबाट सधैं ताजा डेटा लोड हुने सुनिश्चित गर्नुहोस्
आफ्नो अनुकूलित दृष्टिकोणले समान प्रयोगकर्ता अनुभव कायम राख्छ कि छैन परीक्षण गर्नुहोस्

उन्नत विचार:

पूर्ण खाता डेटा भण्डारण बनाम केवल प्रमाणीकरण टोकनहरू बीचको व्यापार-अफ तुलना गर्नुहोस्
भविष्यका टिम सदस्यहरूको लागि आफ्नो निर्णयहरू र तर्क दस्तावेज गर्नुहोस्

यो चुनौतीले तपाईंलाई एक व्यावसायिक डेभलपरको रूपमा सोच्न मद्दत गर्नेछ जसले कार्यक्षमता र एप्लिकेसन दक्षता दुवै विचार गर्छ। विभिन्न दृष्टिकोणहरू प्रयोग गर्न समय लिनुहोस्!

पोस्ट-व्याख्यान क्विज

असाइनमेन्ट

"लेनदेन थप्नुहोस्" संवाद लागू गर्नुहोस्

असाइनमेन्ट पूरा गरेपछि प्राप्त हुने उदाहरण परिणाम:

अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादहरूमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।

56 KiB Raw Blame History Unescape Escape