Zustand کو سمجھنا

اسٹیٹ مینجمنٹ اکثر بہت پیچیدہ محسوس ہوتی ہے۔

آپ جانتے ہیں کہ React useState کو کیسے استعمال کرنا ہے۔ آپ جانتے ہیں کہ props کیسے پاس کرنے ہیں۔ آپ جانتے ہیں کہ اسٹیٹ کو اوپر کیسے لانا (lift state up) ہے۔

لیکن جب آپ کی ایپ بڑھتی ہے تو سب کچھ بگڑ جاتا ہے۔ آپ ڈیٹا کو ان components کے ذریعے پاس کرنا شروع کر دیتے ہیں جنہیں اس کی ضرورت نہیں ہوتی۔ اسے prop drilling کہتے ہیں۔ یہ آپ کے کوڈ کو الجھا ہوا اور برقرار رکھنا مشکل بنا دیتا ہے۔

Zustand اس کا حل فراہم کرتا ہے۔ یہ آپ کی ایپ کو آپ کے React components سے باہر ایک مشترکہ اسٹیٹ (shared state) فراہم کرتا ہے۔

اسے اس طرح سے سوچیں:

Zustand کے بغیر: Component A، B کو props پاس کرتا ہے، B، C کو پاس کرتا ہے، اور C، D کو پاس کرتا ہے۔

Zustand کے ساتھ: ہر component براہ راست ایک مرکزی اسٹور (central store) سے بات کرتا ہے۔ کوئی درمیانی واسیلہ نہیں۔ کوئی prop drilling نہیں۔

ایک Zustand store دو چیزوں پر مشتمل ہوتا ہے:

• State: آپ کا ڈیٹا۔
• Actions: وہ فنکشنز جو آپ کے ڈیٹا کو تبدیل کرتے ہیں۔

بس یہی ہے یہ۔

Zustand تیز ہے کیونکہ یہ صرف ان components کو دوبارہ رینڈر (re-render) کرتا ہے جو اس مخصوص ڈیٹا کو استعمال کرتے ہیں جس میں تبدیلی آئی ہے۔

اگر آپ چاہتے ہیں کہ پیج ریفریش ہونے پر بھی آپ کا ڈیٹا برقرار رہے، تو localStorage استعمال کریں۔ چونکہ localStorage صرف اسٹرنگز (strings) کو اسٹور کرتا ہے، اس لیے آپ کو آبجیکٹس کو محفوظ کرنے کے لیے JSON.stringify اور انہیں پڑھنے کے لیے JSON.parse استعمال کرنا ہوگا۔

یہاں ایک auth store کو ترتیب دینے کا سادہ طریقہ ہے:

• صارف (user) اور ٹوکن (token) کو localStorage میں اسٹور کریں۔
• اسٹور اور براؤزر اسٹوریج کو اپ ڈیٹ کرنے کے لیے ایک login function استعمال کریں۔
• دونوں کو صاف کرنے کے لیے ایک logout function استعمال کریں۔

یہ Redux سے کیسے مختلف ہے؟

Redux کے لیے dispatchers اور reducers کی ضرورت ہوتی ہے۔ اس میں بہت زیادہ boilerplate کوڈ شامل ہوتا ہے۔ Zustand آپ کو براہ راست ایک فنکشن کال کرنے کی اجازت دیتا ہے۔ اس میں ذہنی بوجھ (mental overhead) کم ہے اور سیٹ اپ بھی کم ہے۔

عام غلطیاں جن سے بچنا چاہیے:

• create function میں آبجیکٹ ریٹرن کرنا بھول جانا۔ اپنے آبجیکٹ کے گرد بریکٹس (parentheses) استعمال کریں۔
• اپنے state object کے اندر سیمیکولن (semicolons) استعمال کرنا۔ اس کے بجائے کومہ (commas) استعمال کریں۔
• ایسے ڈیٹا کو پارس کرنا جو پہلے سے ہی ایک اسٹرنگ ہے۔

اسٹیٹ مینجمنٹ لائبریریاں اسٹیٹ کو مینج کرنے کے بارے میں نہیں ہیں۔ وہ پیچیدگی (complexity) کو مینج کرنے کے بارے میں ہیں۔

ہر API کو یاد کرنے کی کوشش کرنا چھوڑ دیں۔ اس مسئلے کو دیکھنا شروع کریں جسے یہ ٹول حل کرنے کی کوشش کرتا ہے۔ جب آپ مسئلہ سمجھ جاتے ہیں، تو ٹول کا مقصد واضح ہو جاتا ہے۔

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