History

softchris 3f7ec0bbe8 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

बँकिंग अ‍ॅप तयार करा भाग 4: स्टेट मॅनेजमेंटची संकल्पना

प्री-लेक्चर क्विझ

परिचय

स्टेट मॅनेजमेंट म्हणजे व्हॉयजर अंतराळ यानावरील नेव्हिगेशन सिस्टमसारखे आहे – जेव्हा सर्व काही सुरळीत चालू असते, तेव्हा त्याची उपस्थिती फारशी जाणवत नाही. पण जेव्हा काहीतरी चुकते, तेव्हा ते आंतरतारकीय अवकाश गाठण्याचा किंवा ब्रह्मांडाच्या पोकळीत हरवण्याचा फरक बनतो. वेब डेव्हलपमेंटमध्ये, स्टेट म्हणजे तुमच्या अ‍ॅप्लिकेशनला लक्षात ठेवण्याची गरज असलेली सर्व गोष्टी: वापरकर्त्याची लॉगिन स्थिती, फॉर्म डेटा, नेव्हिगेशन इतिहास आणि तात्पुरते इंटरफेस स्टेट्स.

तुमचे बँकिंग अ‍ॅप एक साधा लॉगिन फॉर्मपासून अधिक प्रगत अ‍ॅप्लिकेशनमध्ये विकसित झाले आहे, त्यामुळे तुम्हाला काही सामान्य आव्हाने जाणवली असतील. पृष्ठ रीफ्रेश करा आणि वापरकर्ते अनपेक्षितपणे लॉगआउट होतात. ब्राउझर बंद करा आणि सर्व प्रगती गायब होते. समस्या डीबग करा आणि तुम्ही अनेक फंक्शन्समध्ये शोध घेत आहात जे वेगवेगळ्या प्रकारे समान डेटा बदलतात.

हे खराब कोडिंगचे संकेत नाहीत – जेव्हा अ‍ॅप्लिकेशन्स विशिष्ट जटिलतेच्या टप्प्यावर पोहोचतात तेव्हा होणारे नैसर्गिक वाढीचे वेदना आहेत. प्रत्येक डेव्हलपरला ही आव्हाने सामोरी जावी लागतात कारण त्यांचे अ‍ॅप्स "प्रूफ ऑफ कॉन्सेप्ट" पासून "प्रॉडक्शन रेडी" मध्ये संक्रमण करतात.

या धड्यात, आम्ही एक केंद्रीकृत स्टेट मॅनेजमेंट सिस्टम लागू करू जी तुमच्या बँकिंग अ‍ॅपला एक विश्वासार्ह, व्यावसायिक अ‍ॅप्लिकेशनमध्ये रूपांतरित करेल. तुम्ही डेटा प्रवाह व्यवस्थापित करण्यास शिकाल, वापरकर्त्याचे सत्र योग्य प्रकारे टिकवून ठेवाल आणि आधुनिक वेब अ‍ॅप्लिकेशन्ससाठी आवश्यक असलेला गुळगुळीत वापरकर्ता अनुभव तयार कराल.

पूर्वतयारी

स्टेट मॅनेजमेंट संकल्पनांमध्ये जाण्यापूर्वी, तुमचे डेव्हलपमेंट वातावरण योग्य प्रकारे सेट केलेले असणे आणि तुमचे बँकिंग अ‍ॅप फाउंडेशन तयार असणे आवश्यक आहे. या मालिकेच्या मागील भागांमधील संकल्पना आणि कोडवर हा धडा थेट तयार केला आहे.

पुढे जाण्यापूर्वी खालील घटक तयार ठेवा:

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

डेटा फेचिंग धडा पूर्ण करा - तुमचे अ‍ॅप खाते डेटा यशस्वीरित्या लोड आणि प्रदर्शित करायला हवे
तुमच्या सिस्टमवर Node.js इंस्टॉल करा बॅकएंड API चालवण्यासाठी
खाते डेटा ऑपरेशन्स हाताळण्यासाठी सर्व्हर API स्थानिकपणे सुरू करा

तुमचे वातावरण तपासणे:

तुमचा API सर्व्हर योग्यरित्या चालू आहे का ते तपासण्यासाठी टर्मिनलमध्ये हा आदेश चालवा:

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

हा आदेश काय करतो:

GET विनंती पाठवतो तुमच्या स्थानिक API सर्व्हरला
कनेक्शनची चाचणी करतो आणि सर्व्हर प्रतिसाद देत आहे का ते सत्यापित करतो
API आवृत्ती माहिती परत करतो जर सर्व काही योग्य प्रकारे कार्य करत असेल

वर्तमान स्टेट समस्यांचे निदान

शेरलॉक होम्सने गुन्ह्याच्या ठिकाणाचा अभ्यास केल्याप्रमाणे, आपण आपल्या वर्तमान अंमलबजावणीमध्ये नेमके काय घडत आहे ते समजून घेतले पाहिजे जेणेकरून वापरकर्त्याच्या सत्राच्या गायब होण्याचे रहस्य सोडवता येईल.

चला एक साधा प्रयोग करूया जो अंतर्निहित स्टेट मॅनेजमेंट आव्हाने उघड करतो:

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

तुमच्या बँकिंग अ‍ॅपमध्ये लॉगिन करा आणि डॅशबोर्डवर जा
ब्राउझर पृष्ठ रीफ्रेश करा
तुमच्या लॉगिन स्थितीवर काय परिणाम होतो ते निरीक्षण करा

जर तुम्हाला लॉगिन स्क्रीनवर परत पाठवले गेले असेल, तर तुम्ही क्लासिक स्टेट टिकवून ठेवण्याची समस्या शोधली आहे. हे वर्तन घडते कारण आमची वर्तमान अंमलबजावणी वापरकर्त्याचा डेटा जावास्क्रिप्ट व्हेरिएबल्समध्ये संग्रहित करते जे प्रत्येक पृष्ठ लोडसह रीसेट होतात.

वर्तमान अंमलबजावणी समस्या:

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

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

आर्किटेक्चरल आव्हान:

टायटॅनिकच्या विभागीकृत डिझाइनप्रमाणे जे अनेक विभाग एकाच वेळी पाण्याने भरले तेव्हा मजबूत वाटले, या समस्यांचे स्वतंत्रपणे निराकरण करणे अंतर्निहित आर्किटेक्चरल समस्येचे निराकरण करणार नाही. आपल्याला एक व्यापक स्टेट मॅनेजमेंट सोल्यूशन आवश्यक आहे.

💡 आपण येथे नेमके काय साध्य करण्याचा प्रयत्न करत आहोत?

स्टेट मॅनेजमेंट म्हणजे दोन मूलभूत कोड्यांचे निराकरण करणे:

माझा डेटा कुठे आहे?: आपल्याकडे कोणती माहिती आहे आणि ती कुठून येत आहे हे लक्षात ठेवणे
सर्वजण एकाच पानावर आहेत का?: वापरकर्त्यांना जे दिसते ते प्रत्यक्षात काय घडत आहे याशी जुळवून घेणे

आमची गेम योजना:

आपल्या शेपटीचा पाठलाग करण्याऐवजी, आम्ही एक केंद्रीकृत स्टेट मॅनेजमेंट प्रणाली तयार करणार आहोत. हे सर्व महत्त्वाच्या गोष्टींच्या व्यवस्थापनासाठी एक अत्यंत संघटित व्यक्ती असल्यासारखे आहे:

या डेटा प्रवाहाचे समजून घेणे:

केंद्रीकृत करते सर्व अ‍ॅप्लिकेशन स्टेट एका ठिकाणी
मार्गदर्शन करते सर्व स्टेट बदल नियंत्रित फंक्शन्सद्वारे
सुनिश्चित करते UI वर्तमान स्टेटशी समक्रमित राहते
पुरवते डेटा व्यवस्थापनासाठी स्पष्ट, अंदाजे पॅटर्न

💡 व्यावसायिक अंतर्दृष्टी: हा धडा मूलभूत संकल्पनांवर लक्ष केंद्रित करतो. जटिल अ‍ॅप्लिकेशन्ससाठी, Redux सारख्या लायब्ररी अधिक प्रगत स्टेट मॅनेजमेंट वैशिष्ट्ये प्रदान करतात. या मूलभूत तत्त्वांचे समजून घेणे तुम्हाला कोणत्याही स्टेट मॅनेजमेंट लायब्ररीमध्ये प्रभुत्व मिळविण्यास मदत करेल.

⚠️ प्रगत विषय: स्टेट बदलांद्वारे ट्रिगर केलेल्या स्वयंचलित UI अपडेट्स कव्हर केले जाणार नाहीत, कारण यामध्ये Reactive Programming संकल्पना समाविष्ट आहेत. तुमच्या शिक्षण प्रवासासाठी हा एक उत्कृष्ट पुढचा टप्पा मानला जाऊ शकतो!

कार्य: स्टेट स्ट्रक्चर केंद्रीकृत करा

चला आपल्या विखुरलेल्या स्टेट मॅनेजमेंटला केंद्रीकृत प्रणालीमध्ये रूपांतरित करण्यास सुरुवात करूया. हा पहिला टप्पा पुढील सुधारणा करण्यासाठी पाया तयार करतो.

पायरी 1: केंद्रीकृत स्टेट ऑब्जेक्ट तयार करा

साध्या account घोषणेला बदला:

let account = null;

एक संरचित स्टेट ऑब्जेक्टसह:

let state = {
  account: null
};

या बदलाचा महत्त्व:

केंद्रीकृत करते सर्व अ‍ॅप्लिकेशन डेटा एका ठिकाणी
तयार करते संरचना नंतर अधिक स्टेट गुणधर्म जोडण्यासाठी
निर्माण करते स्टेट आणि इतर व्हेरिएबल्स दरम्यान स्पष्ट सीमा
स्थापित करते एक पॅटर्न जो तुमच्या अ‍ॅपच्या वाढीसोबत स्केल होतो

पायरी 2: स्टेट ऍक्सेस पॅटर्न अपडेट करा

तुमच्या फंक्शन्सला नवीन स्टेट संरचना वापरण्यासाठी अपडेट करा:

register() आणि login() फंक्शन्समध्ये, बदला:

account = ...

सह:

state.account = ...

updateDashboard() फंक्शनमध्ये, वरच्या बाजूला ही ओळ जोडा:

const account = state.account;

या अपडेट्सने काय साध्य केले:

सध्याचे कार्यक्षमता टिकवून ठेवते आणि संरचनेत सुधारणा करते
तयार करते तुमचा कोड अधिक प्रगत स्टेट मॅनेजमेंटसाठी
निर्माण करते स्टेट डेटा ऍक्सेस करण्यासाठी सुसंगत पॅटर्न
स्थापित करते केंद्रीकृत स्टेट अपडेट्ससाठी पाया

💡 टीप: हे पुनर्रचना त्वरित आमच्या समस्यांचे निराकरण करत नाही, परंतु येणाऱ्या शक्तिशाली सुधारणा करण्यासाठी आवश्यक पाया तयार करते!

नियंत्रित स्टेट अपडेट्स अंमलात आणणे

आमचा स्टेट केंद्रीकृत झाल्यानंतर, पुढील टप्पा डेटा बदलांसाठी नियंत्रित यंत्रणा स्थापित करणे आहे. ही पद्धत अंदाजे स्टेट बदल आणि सोपे डीबगिंग सुनिश्चित करते.

मुख्य तत्त्व एअर ट्रॅफिक कंट्रोलसारखे आहे: अनेक फंक्शन्सना स्वतंत्रपणे स्टेट बदलण्याची परवानगी देण्याऐवजी, आम्ही सर्व बदल एका नियंत्रित फंक्शनद्वारे चॅनेल करू. हा पॅटर्न डेटा कधी आणि कसा बदलतो यावर स्पष्ट देखरेख प्रदान करतो.

Immutable स्टेट मॅनेजमेंट:

आम्ही आमच्या state ऑब्जेक्टला immutable मानणार आहोत, म्हणजे आम्ही त्याला थेट बदलणार नाही. त्याऐवजी, प्रत्येक बदल नवीन स्टेट ऑब्जेक्ट तयार करतो ज्यामध्ये अपडेट केलेला डेटा असतो.

ही पद्धत थेट बदलांच्या तुलनेत सुरुवातीला अकार्यक्षम वाटू शकते, परंतु डीबगिंग, चाचणी आणि अ‍ॅप्लिकेशन अंदाजे टिकवून ठेवण्यासाठी ती महत्त्वपूर्ण फायदे प्रदान करते.

Immutable स्टेट मॅनेजमेंटचे फायदे:

फायदा	वर्णन	परिणाम
अंदाजे	बदल फक्त नियंत्रित फंक्शन्सद्वारे होतात	डीबगिंग आणि चाचणी सोपे
इतिहास ट्रॅकिंग	प्रत्येक स्टेट बदल नवीन ऑब्जेक्ट तयार करतो	Undo/Redo कार्यक्षमता सक्षम करते
साइड इफेक्ट प्रतिबंध	कोणतेही अपघाती बदल नाहीत	रहस्यमय बग्स टाळते
कामगिरी ऑप्टिमायझेशन	स्टेट प्रत्यक्षात बदलला तेव्हा शोधणे सोपे	कार्यक्षम UI अपडेट्स सक्षम करते

JavaScript Immutable Object.freeze() सह:

JavaScript Object.freeze() प्रदान करते ऑब्जेक्ट बदल प्रतिबंधित करण्यासाठी:

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

येथे काय घडते ते समजून घेणे:

प्रतिबंधित करते थेट प्रॉपर्टी असाइनमेंट्स किंवा डिलीशन्स
अपवाद फेकते जर बदल करण्याचे प्रयत्न केले गेले
सुनिश्चित करते स्टेट बदल नियंत्रित फंक्शन्सद्वारे होणे आवश्यक आहे
निर्माण करते स्टेट कसा अपडेट केला जाऊ शकतो यासाठी स्पष्ट करार

💡 सखोल अभ्यास: MDN दस्तऐवज मध्ये shallow आणि deep immutable ऑब्जेक्ट्समधील फरक जाणून घ्या. जटिल स्टेट संरचनेसाठी हा फरक समजून घेणे महत्त्वाचे आहे.

कार्य

चला एक नवीन updateState() फंक्शन तयार करूया:

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

या फंक्शनमध्ये, आम्ही नवीन स्टेट ऑब्जेक्ट तयार करतो आणि spread (...) ऑपरेटर वापरून मागील स्टेटमधून डेटा कॉपी करतो. नंतर आम्ही bracket notation [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 प्राधान्ये	योग्य संग्रहण कालावधी निवडा

💡 प्रगत पर्याय: मोठ्या डेटासेटसह जटिल ऑफलाइन अनुप्रयोगांसाठी IndexedDB API विचारात घ्या. हे पूर्ण क्लायंट-साइड डेटाबेस प्रदान करते परंतु अधिक जटिल अंमलबजावणीची आवश्यकता असते.

कार्य: localStorage स्थिरता अंमलात आणा

चला स्थिर स्टोरेज अंमलात आणूया जेणेकरून वापरकर्ते स्पष्टपणे लॉग आउट होईपर्यंत लॉग इन राहतील. आम्ही localStorage वापरून ब्राउझर सत्रांमध्ये खाते डेटा साठवू.

पायरी 1: स्टोरेज कॉन्फिगरेशन परिभाषित करा

const storageKey = 'savedAccount';

या स्थिरतेने काय प्रदान केले आहे:

सुसंगत आयडेंटिफायर तयार करते साठवलेल्या डेटासाठी
टायपो टाळते स्टोरेज की संदर्भांमध्ये
साठवण की बदलणे सोपे करते जर आवश्यक असेल तर
सर्वोत्तम पद्धतींचे अनुसरण करते देखभालक्षम कोडसाठी

पायरी 2: स्वयंचलित स्थिरता जोडा

updateState() फंक्शनच्या शेवटी ही ओळ जोडा:

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

येथे काय घडते याचे विश्लेषण:

खाते ऑब्जेक्ट JSON स्ट्रिंगमध्ये रूपांतरित करते साठवण्यासाठी
डेटा साठवते आमच्या सुसंगत स्टोरेज की वापरून
स्वयंचलितपणे अंमलात आणते जेव्हा राज्य बदल होतो
सुनिश्चित करते की साठवलेला डेटा सद्यस्थितीसह नेहमी समक्रमित असतो

💡 आर्किटेक्चरचा फायदा: कारण आम्ही सर्व राज्य अद्यतने updateState() मध्ये केंद्रीकृत केली आहेत, स्थिरता जोडण्यासाठी फक्त एक ओळ कोड आवश्यक होती. हे चांगल्या आर्किटेक्चरल निर्णयाचे सामर्थ्य दर्शवते!

पायरी 3: अॅप लोडवर राज्य पुनर्संचयित करा

साठवलेला डेटा पुनर्संचयित करण्यासाठी एक प्रारंभिक फंक्शन तयार करा:

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

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

init();

प्रारंभिक प्रक्रियेचे समजून घेणे:

पूर्वी साठवलेला खाते डेटा पुनर्प्राप्त करते localStorage मधून
JSON स्ट्रिंग परत JavaScript ऑब्जेक्टमध्ये पार्स करते
आमच्या नियंत्रित अद्यतन फंक्शनचा वापर करून राज्य अद्यतनित करते
वापरकर्त्याचे सत्र स्वयंचलितपणे पुनर्संचयित करते पृष्ठ लोडवर
मार्ग अद्यतनांपूर्वी अंमलात आणते जेणेकरून राज्य उपलब्ध असेल

पायरी 4: डीफॉल्ट मार्ग ऑप्टिमाइझ करा

स्थिरतेचा फायदा घेण्यासाठी डीफॉल्ट मार्ग अद्यतनित करा:

updateRoute() मध्ये, बदला:

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

या बदलाचा अर्थ:

आमच्या नवीन स्थिरता प्रणालीचा प्रभावीपणे उपयोग करते
डॅशबोर्डला प्रमाणीकरण तपासणी हाताळण्याची परवानगी देते
स्वयंचलितपणे लॉगिनकडे पुनर्निर्देशित करते जर साठवलेले सत्र अस्तित्वात नसेल
वापरकर्त्याचा अनुभव अधिक सहज बनवते

तुमच्या अंमलबजावणीची चाचणी करणे:

तुमच्या बँकिंग अॅपमध्ये लॉग इन करा
ब्राउझर पृष्ठ रीफ्रेश करा
खात्री करा की तुम्ही लॉग इन राहता आणि डॅशबोर्डवर असता
तुमचा ब्राउझर बंद करा आणि पुन्हा उघडा
तुमच्या अॅपवर परत जा आणि खात्री करा की तुम्ही अजूनही लॉग इन आहात

🎉 साध्य केलेले यश: तुम्ही यशस्वीरित्या स्थिर राज्य व्यवस्थापन अंमलात आणले आहे! तुमचे अॅप आता व्यावसायिक वेब अॅप्लिकेशनसारखे वागते.

स्थिरतेसह डेटा ताजेपणा संतुलित करणे

आमची स्थिरता प्रणाली यशस्वीरित्या वापरकर्त्याचे सत्र टिकवून ठेवते, परंतु एक नवीन आव्हान निर्माण करते: डेटा जुना होणे. जेव्हा अनेक वापरकर्ते किंवा अनुप्रयोग समान सर्व्हर डेटा बदलतात, तेव्हा स्थानिक कॅश केलेली माहिती कालबाह्य होते.

ही परिस्थिती वायकिंग नेव्हिगेटर्ससारखी आहे ज्यांनी साठवलेल्या ताऱ्यांच्या चार्ट्सवर आणि वर्तमान आकाशीय निरीक्षणांवर अवलंबून राहिले. चार्ट्स सातत्य प्रदान करतात, परंतु बदलत्या परिस्थितींचा विचार करण्यासाठी नेव्हिगेटर्सना ताजी निरीक्षणे आवश्यक असतात. त्याचप्रमाणे, आमच्या अॅप्लिकेशनला स्थिर वापरकर्ता राज्य आणि वर्तमान सर्व्हर डेटा दोन्ही आवश्यक आहेत.

🧪 डेटा ताजेपणा समस्येचा शोध घेणे:

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 "जुना" (कालबाह्य) होऊ शकतो
अनुकरण करते वास्तविक परिस्थिती जिथे डेटा बदल अॅपच्या बाहेर होतो
स्थिरता आणि डेटा ताजेपणामधील तणाव उघड करते

डेटा जुना होण्याचे आव्हान:

समस्या	कारण	वापरकर्त्याचा परिणाम
जुना डेटा	localStorage स्वयंचलितपणे कालबाह्य होत नाही	वापरकर्त्यांना जुनी माहिती दिसते
सर्व्हर बदल	इतर अॅप्स/वापरकर्ते समान डेटा बदलतात	प्लॅटफॉर्मवर विसंगत दृश्ये
कॅश विरुद्ध वास्तव	स्थानिक कॅश सर्व्हर राज्याशी जुळत नाही	खराब वापरकर्ता अनुभव आणि गोंधळ

समाधान धोरण:

आम्ही "लोडवर रीफ्रेश" पॅटर्न अंमलात आणू जो स्थिरतेच्या फायद्यांसह ताज्या डेटाची आवश्यकता संतुलित करतो. हा दृष्टिकोन गुळगुळीत वापरकर्ता अनुभव राखतो आणि डेटा अचूकता सुनिश्चित करतो.

कार्य: डेटा रीफ्रेश प्रणाली अंमलात आणा

आम्ही एक प्रणाली तयार करू जी सर्व्हरवरून ताजी डेटा स्वयंचलितपणे आणते आणि आमच्या स्थिर राज्य व्यवस्थापनाचे फायदे राखते.

पायरी 1: खाते डेटा अपडेटर तयार करा

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() फंक्शन वापरून
सर्व्हर त्रुटींचे सौम्यपणे हाताळते अवैध सत्र लॉग आउट करून
ताज्या डेटासह राज्य अद्यतनित करते आमच्या नियंत्रित अद्यतन प्रणालीचा वापर करून
स्वयंचलित localStorage स्थिरता ट्रिगर करते updateState() फंक्शनद्वारे

पायरी 2: डॅशबोर्ड रीफ्रेश हँडलर तयार करा

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

हा रीफ्रेश फंक्शन काय साध्य करतो:

डेटा रीफ्रेश आणि UI अद्यतन प्रक्रिया समन्वयित करते
ताजा डेटा लोड होईपर्यंत थांबते डिस्प्ले अद्यतनित करण्यापूर्वी
डॅशबोर्डवर सर्वात वर्तमान माहिती दर्शवते
डेटा व्यवस्थापन आणि UI अद्यतनांमध्ये स्वच्छ विभाजन राखते

पायरी 3: मार्ग प्रणालीसह समाकलित करा

ताजी डेटा स्वयंचलितपणे ट्रिगर करण्यासाठी तुमची मार्ग कॉन्फिगरेशन अद्यतनित करा:

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

ही समाकलन कसे कार्य करते:

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

तुमच्या डेटा रीफ्रेश प्रणालीची चाचणी करणे:

तुमच्या बँकिंग अॅपमध्ये लॉग इन करा
नवीन व्यवहार तयार करण्यासाठी पूर्वीचा curl आदेश चालवा
तुमचे डॅशबोर्ड पृष्ठ रीफ्रेश करा किंवा दूर जा आणि परत या
खात्री करा की नवीन व्यवहार त्वरित दिसतो

🎉 परिपूर्ण संतुलन साध्य केले: तुमचे अॅप आता स्थिर राज्याचा गुळगुळीत अनुभव आणि ताज्या सर्व्हर डेटाची अचूकता एकत्र करते!

GitHub Copilot Agent Challenge 🚀

Agent मोड वापरून खालील आव्हान पूर्ण करा:

वर्णन: बँकिंग अॅपसाठी undo/redo कार्यक्षमतेसह व्यापक राज्य व्यवस्थापन प्रणाली अंमलात आणा. हे आव्हान तुम्हाला प्रगत राज्य व्यवस्थापन संकल्पना सराव करण्यास मदत करेल ज्यामध्ये राज्य इतिहास ट्रॅकिंग, अपरिवर्तनीय अद्यतने आणि वापरकर्ता इंटरफेस समक्रमण समाविष्ट आहे.

प्रॉम्प्ट: एक सुधारित राज्य व्यवस्थापन प्रणाली तयार करा ज्यामध्ये: 1) सर्व पूर्वीच्या राज्यांचा मागोवा घेणारा राज्य इतिहास अॅरे, 2) पूर्वीच्या राज्यांवर परत जाण्यासाठी undo आणि redo फंक्शन्स, 3) डॅशबोर्डवर undo/redo ऑपरेशन्ससाठी UI बटणे, 4) मेमरी समस्यांपासून बचाव करण्यासाठी 10 राज्यांचा कमाल इतिहास मर्यादा, आणि 5) वापरकर्ता लॉग आउट झाल्यावर इतिहासाची योग्य साफसफाई. खात्री करा की undo/redo कार्यक्षमता खाते शिल्लक बदलांसह कार्य करते आणि ब्राउझर रीफ्रेशमध्ये टिकून राहते.

agent mode बद्दल अधिक जाणून घ्या.

🚀 आव्हान: स्टोरेज ऑप्टिमायझेशन

तुमची अंमलबजावणी आता वापरकर्ता सत्र, डेटा रीफ्रेश आणि राज्य व्यवस्थापन प्रभावीपणे हाताळते. तथापि, विचार करा की आमचा सध्याचा दृष्टिकोन स्टोरेज कार्यक्षमता आणि कार्यक्षमतेचे संतुलन योग्य प्रकारे राखतो का.

जसे बुद्धिबळ मास्टर्स आवश्यक तुकड्यांमध्ये आणि खर्च करण्यायोग्य प्याद्यांमध्ये फरक करतात, प्रभावी राज्य व्यवस्थापनासाठी कोणता डेटा टिकवून ठेवायचा आहे आणि कोणता नेहमी सर्व्हरवरून ताजा असावा हे ओळखणे आवश्यक आहे.

ऑप्टिमायझेशन विश्लेषण:

तुमच्या सध्याच्या localStorage अंमलबजावणीचे मूल्यांकन करा आणि या धोरणात्मक प्रश्नांचा विचार करा:

वापरकर्ता प्रमाणीकरण टिकवून ठेवण्यासाठी आवश्यक किमान माहिती काय आहे?
कोणता डेटा इतक्या वारंवार बदलतो की स्थानिक कॅशिंगचा फारसा फायदा होत नाही?
स्टोरेज ऑप्टिमायझेशन वापरकर्ता अनुभव खराब न करता कार्यक्षमता कशी सुधारू शकते?

अंमलबजावणी धोरण:

आवश्यक डेटा ओळखा जो टिकवून ठेवला पाहिजे (बहुधा फक्त वापरकर्ता ओळख)
तुमची localStorage अंमलबजावणी सुधारित करा फक्त महत्त्वपूर्ण सत्र डेटा साठवण्यासाठी
ताजा डेटा नेहमी सर्व्हरवरून लोड करा डॅशबोर्ड भेटीवर
चाचणी करा की तुमचा ऑप्टिमाइझ केलेला दृष्टिकोन समान वापरकर्ता अनुभव राखतो

प्रगत विचार:

पूर्ण खाते डेटा साठवणे आणि फक्त प्रमाणीकरण टोकन साठवणे यामधील व्यापार-उतारांचा तुलना करा
तुमचे निर्णय आणि भविष्यातील टीम सदस्यांसाठी कारणे दस्तऐवजीकरण करा

हे आव्हान तुम्हाला एक व्यावसायिक विकसकासारखे विचार करण्यास मदत करेल जो त्यांच्या उपायांमध्ये कार्यक्षमता आणि कार्यक्षमतेचा विचार करतो. वेगवेगळ्या दृष्टिकोनांसह प्रयोग करण्यासाठी तुमचा वेळ घ्या!

पोस्ट-लेक्चर क्विझ

असाइनमेंट

"Add transaction" डायलॉग अंमलात आणा

असाइनमेंट पूर्ण केल्यानंतरचे उदाहरण परिणाम:

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयाः लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.

README.md Unescape Escape