Zustand समजून घेणे

स्टेट मॅनेजमेंट अनेकदा खूप गुंतागुंतीचे वाटते.

तुम्हाला React useState कसे वापरायचे हे माहित आहे. तुम्हाला props कसे पास करायचे हे माहित आहे. तुम्हाला state वर कसा लिफ्ट (lift state up) करायचा हे माहित आहे.

पण जेव्हा तुमचे ॲप मोठे होते, तेव्हा सर्व काही विस्कळीत होते. तुम्ही अशा कंपोनंट्समधून डेटा पास करू लागता ज्यांना त्याची गरज नसते. याला 'prop drilling' म्हणतात. यामुळे तुमचा कोड विस्कळीत होतो आणि तो मेंटेन करणे कठीण जाते.

Zustand हे सोडवते. हे तुमच्या React कंपोनंट्सच्या बाहेर तुमच्या ॲपला एक शेअर केलेली स्टेट (shared state) देते.

या प्रकारे विचार करा:

Zustand शिवाय: कंपोनंट A, B ला props पास करतो, B, C ला पास करतो आणि C, D ला पास करतो.

Zustand सह: प्रत्येक कंपोनंट थेट एका सेंट्रल स्टोअरशी (central store) संवाद साधतो. कोणताही मध्यस्थ नाही. कोणतीही prop drilling नाही.

Zustand स्टोअरमध्ये दोन गोष्टी असतात:

  • State: तुमचा डेटा.
  • Actions: तुमचा डेटा बदलणारे फंक्शन्स.

एवढेच आहे.

Zustand वेगवान आहे कारण ते फक्त त्याच कंपोनंट्सना री-रेंडर (re-render) करते जे बदललेल्या विशिष्ट डेटाचा वापर करतात.

जर तुम्हाला तुमचा डेटा पेज रिफ्रेश झाल्यावरही टिकवून ठेवायचा असेल, तर localStorage वापरा. localStorage फक्त स्ट्रिंग्स (strings) स्टोअर करते, त्यामुळे ऑब्जेक्ट्स सेव्ह करण्यासाठी तुम्हाला JSON.stringify आणि ते वाचण्यासाठी JSON.parse वापरावे लागेल.

ऑथ स्टोअर (auth store) स्ट्रक्चर करण्याचा एक सोपा मार्ग खालीलप्रमाणे आहे:

  • युजर आणि टोकन localStorage मध्ये स्टोअर करा.
  • स्टोअर आणि ब्राउझर स्टोरेज अपडेट करण्यासाठी लॉगिन फंक्शन वापरा.
  • दोन्ही क्लिअर करण्यासाठी लॉगआउट फंक्शन वापरा.

याची Redux सोबत तुलना कशी आहे?

Redux साठी dispatchers आणि reducers लागतात. यामध्ये खूप जास्त boilerplate code लिहावा लागतो. Zustand तुम्हाला थेट फंक्शन कॉल करण्याची परवानगी देते. यामध्ये मानसिक ताण (mental overhead) कमी आहे आणि सेटअपही कमी आहे.

टाळण्यासारख्या सामान्य चुका:

  • create फंक्शनमध्ये ऑब्जेक्ट रिटर्न करायला विसरणे. तुमच्या ऑब्जेक्टभोवती कंसाचा (parentheses) वापर करा.
  • तुमच्या state ऑब्जेक्टमध्ये सेमीकोलन (semicolons) वापरणे. त्याऐवजी स्वल्पविराम (commas) वापरा.
  • जो डेटा आधीच स्ट्रिंग आहे, त्याला पार्स (parse) करणे.

स्टेट मॅनेजमेंट लायब्ररीज म्हणजे फक्त स्टेट मॅनेज करणे नव्हे. त्या गुंतागुंत (complexity) मॅनेज करण्यासाठी असतात.

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

Source: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11