History

softchris 04881ec984 🌐 Update translations via Co-op Translator		10 months ago
..
README.md	🌐 Update translations via Co-op Translator	10 months ago
assignment.md	🌐 Update translations via Co-op Translator	12 months ago

README.md

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

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

परिचय

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

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

पूर्वतयारी

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

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

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

स्टेट मॅनेजमेंटचा पुनर्विचार करा

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

सध्याच्या कोडमध्ये 3 समस्या आहेत:

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

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

आम्ही येथे कोणत्या समस्यांचे निराकरण करण्याचा प्रयत्न करत आहोत?

स्टेट मॅनेजमेंट म्हणजे या दोन विशिष्ट समस्यांचे निराकरण करण्यासाठी चांगला दृष्टिकोन शोधणे:

अ‍ॅपमधील डेटा प्रवाह समजण्यासारखा कसा ठेवायचा?
स्टेट डेटा नेहमी वापरकर्ता इंटरफेससह (आणि उलट) समक्रमित कसा ठेवायचा?

एकदा तुम्ही याची काळजी घेतली की, तुम्हाला असलेल्या इतर कोणत्याही समस्या आधीच निश्चित केल्या जाऊ शकतात किंवा सोडवणे सोपे झाले आहे. या समस्यांचे निराकरण करण्यासाठी अनेक संभाव्य दृष्टिकोन आहेत, परंतु आम्ही डेटा आणि ते बदलण्याचे मार्ग केंद्रीकृत करण्याचे सामान्य समाधान घेऊ. डेटा प्रवाह खालीलप्रमाणे जाईल:

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

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

कार्य

आम्ही थोडे पुनर्रचना करून सुरुवात करू. account घोषणा बदला:

let account = null;

सह:

let state = {
  account: null
};

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

आम्हाला ते वापरणाऱ्या फंक्शन्स अद्यतनित करणे देखील आवश्यक आहे. register() आणि login() फंक्शन्समध्ये, account = ... ला state.account = ... ने बदला;

updateDashboard() फंक्शनच्या शीर्षस्थानी, ही ओळ जोडा:

const account = state.account;

स्वतःच्या बळावर या पुनर्रचनेने फारसे सुधारणा केल्या नाहीत, परंतु पुढील बदलांसाठी पाया घालण्याची कल्पना होती.

डेटा बदलांचा मागोवा घ्या

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

state ऑब्जेक्टमध्ये बदल होण्यापासून टाळण्यासाठी, त्याला immutable मानणे देखील चांगली प्रथा आहे, म्हणजे त्यात अजिबात बदल करता येणार नाही. याचा अर्थ असा की तुम्हाला त्यात काहीही बदल करायचे असल्यास तुम्हाला नवीन स्टेट ऑब्जेक्ट तयार करावा लागेल. असे करून, तुम्ही संभाव्य अवांछित साइड इफेक्ट्स बद्दल संरक्षण तयार करता आणि तुमच्या अ‍ॅपमध्ये नवीन वैशिष्ट्ये अंमलात आणण्याच्या शक्यता उघडता जसे की undo/redo अंमलात आणणे, तसेच डिबग करणे सोपे बनवणे. उदाहरणार्थ, तुम्ही स्टेटमध्ये केलेला प्रत्येक बदल लॉग करू शकता आणि बगचा स्रोत समजून घेण्यासाठी बदलांचा इतिहास ठेवू शकता.

JavaScript मध्ये, तुम्ही Object.freeze() वापरून ऑब्जेक्टची immutable आवृत्ती तयार करू शकता. जर तुम्ही immutable ऑब्जेक्टमध्ये बदल करण्याचा प्रयत्न केला तर अपवाद निर्माण होईल.

✅ शॅलो आणि डीप immutable ऑब्जेक्टमधील फरक तुम्हाला माहित आहे का? तुम्ही याबद्दल येथे वाचू शकता.

कार्य

आम्ही एक नवीन 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() फंक्शन तयार करा:

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

updateDashboard() मध्ये, return navigate('/login'); पुनर्निर्देशन बदलून return logout(); करा;

नवीन खाते नोंदणी करण्याचा प्रयत्न करा, लॉगआउट करा आणि पुन्हा लॉगिन करा आणि सर्व काही योग्य प्रकारे कार्य करत आहे का ते तपासा.

टिप: तुम्ही ब्राउझरच्या विकास साधनांमध्ये कन्सोल उघडून आणि updateState() च्या तळाशी console.log(state) जोडून सर्व स्टेट बदल पाहू शकता.

स्टेट टिकवून ठेवा

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

तुम्हाला तुमच्या ब्राउझरमध्ये डेटा टिकवून ठेवायचा असेल तर तुम्ही स्वतःला काही महत्त्वाचे प्रश्न विचारले पाहिजेत:

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

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

डेटा संग्रहित करण्यासाठी अनेक ब्राउझर API वापरण्याचा एक पर्याय आहे. त्यापैकी दोन विशेषतः मनोरंजक आहेत:

localStorage: एक की/व्हॅल्यू स्टोअर जे सध्याच्या वेबसाइटसाठी विशिष्ट डेटा वेगवेगळ्या सत्रांमध्ये टिकवून ठेवण्याची परवानगी देते. त्यात सेव्ह केलेला डेटा कधीही कालबाह्य होत नाही.
sessionStorage: हे localStorage प्रमाणेच कार्य करते परंतु त्यात संग्रहित डेटा सत्र संपल्यानंतर (ब्राउझर बंद झाल्यावर) साफ केला जातो.

लक्षात ठेवा की हे दोन्ही API फक्त स्ट्रिंग्स संग्रहित करण्याची परवानगी देतात. तुम्हाला जटिल ऑब्जेक्ट्स संग्रहित करायचे असल्यास, तुम्हाला JSON.stringify() वापरून ते JSON स्वरूपात सिरीयलाइझ करावे लागेल.

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

कार्य

आम्हाला आमचे वापरकर्ते लॉगआउट बटणावर स्पष्टपणे क्लिक करेपर्यंत लॉग इन ठेवायचे आहे, त्यामुळे आम्ही खाते डेटा संग्रहित करण्यासाठी localStorage वापरू. प्रथम, आपण डेटा संग्रहित करण्यासाठी वापरण्यासाठी एक की परिभाषित करूया.

const storageKey = 'savedAccount';

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

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

यामुळे, वापरकर्ता खाते डेटा टिकवून ठेवला जाईल आणि आम्ही पूर्वी केंद्रीकृत केलेल्या सर्व स्टेट अद्यतनांमुळे नेहमी अद्ययावत राहील. येथे आम्ही आमच्या सर्व पूर्वीच्या पुनर्रचनेचा फायदा घेण्यास सुरुवात करतो 🙂.

डेटा सेव्ह केला जात असल्याने, अ‍ॅप लोड झाल्यावर तो पुनर्संचयित करण्याची काळजी घेणे आवश्यक आहे. आता आपल्याकडे अधिक प्रारंभिक कोड असणार आहे, त्यामुळे app.js च्या तळाशी असलेल्या आमच्या पूर्वीच्या कोडसह नवीन init फंक्शन तयार करणे चांगले होईल:

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

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

init();

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

आम्ही डॅशबोर्ड पृष्ठ आमच्या अ‍ॅप्लिकेशनचे डीफॉल्ट पृष्ठ बनवू शकतो, कारण आता आम्ही खाते डेटा टिकवून ठेवत आहोत. जर कोणताही डेटा सापडला नाही, तर डॅशबोर्ड लॉगिन पृष्ठावर पुनर्निर्देशित करण्याची काळजी घेतो. updateRoute() मध्ये, फॉलबॅक 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 मुळे स्टेट अनिश्चित काळ टिकवून ठेवली जाते, परंतु याचा अर्थ असा आहे की तुम्ही अ‍ॅपमधून लॉग आउट होईपर्यंत ते कधीही अद्यतनित होत नाही!

ते ठीक करण्यासाठी एक संभाव्य रणनीती म्हणजे डॅशबोर्ड लोड झाल्यावर प्रत्येक वेळी खाते डेटा पुन्हा लोड करणे, जेणेकरून जुना डेटा टाळता येईल.

कार्य

नवीन updateAccountData फंक्शन तयार करा:

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);
}

ही पद्धत तपासते की आपण सध्या लॉग इन आहात आणि नंतर सर्व्हरवरून खाते डेटा पुन्हा लोड करते.

refresh नावाचे आणखी एक फंक्शन तयार करा:

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

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

🚀 आव्हान

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

localStorage मध्ये काय सेव्ह आणि लोड करायचे ते फक्त अॅप कार्य करण्यासाठी आवश्यक असलेल्या गोष्टींवर मर्यादित करण्याचा प्रयत्न करा.

व्याख्यानानंतरचा क्विझ

असाइनमेंट

"Add transaction" डायलॉग लागू करा

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

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