Zustand-ஐப் புரிந்துகொள்ளுதல்

நிலை மேலாண்மை (State management) பெரும்பாலும் மிகவும் சிக்கலானதாகத் தோன்றுகிறது.

உங்களுக்கு React useState-ஐ எப்படி பயன்படுத்துவது என்று தெரியும். Props-களை எப்படி அனுப்புவது என்று தெரியும். நிலையை (state) எப்படி மேலே உயர்த்துவது (lift state up) என்றும் தெரியும்.

ஆனால் உங்கள் ஆப் (app) வளரும்போது அனைத்தும் உடைந்துவிடும். தேவைப்படாத கூறுகளுக்கு (components) வழியாக நீங்கள் தரவை அனுப்பத் தொடங்குவீர்கள். இதுதான் Prop drilling. இது உங்கள் குறியீட்டை (code) குழப்பமாகவும் பராமரிக்க கடினமாகவும் மாற்றுகிறது.

Zustand இதைத் தீர்க்கிறது. இது உங்கள் React கூறுகளுக்கு வெளியே ஒரு பகிரப்பட்ட நிலையை (shared state) உங்கள் ஆப்பிற்கு வழங்குகிறது.

இதை இப்படிச் சிந்தித்துப் பாருங்கள்:

Zustand இல்லாமல்: Component A, B-க்கு props-களை அனுப்புகிறது, B, C-க்கு அனுப்புகிறது, மற்றும் C, D-க்கு அனுப்புகிறது.

Zustand உடன்: ஒவ்வொரு கூறும் நேரடியாக ஒரு மையச் சேமிப்பகத்துடன் (central store) பேசுகிறது. இடைத்தரகர் இல்லை. Prop drilling இல்லை.

ஒரு Zustand store இரண்டு விஷயங்களைக் கொண்டுள்ளது:

  • State: உங்கள் தரவு.
  • Actions: உங்கள் தரவை மாற்றும் செயல்பாடுகள் (functions).

அவ்வளவுதான்.

Zustand வேகமானது, ஏனெனில் மாறிய குறிப்பிட்ட தரவைப் பயன்படுத்தும் கூறுகளை மட்டுமே இது மறு-ரெண்டரிங் (re-render) செய்கிறது.

உங்கள் தரவு ஒரு பக்கத்தைப் புதுப்பிக்கும்போது (page refresh) அழியாமல் இருக்க வேண்டுமென்றால், localStorage-ஐப் பயன்படுத்தவும். localStorage சரங்களை (strings) மட்டுமே சேமிப்பதால், பொருள்களைச் (objects) சேமிக்க JSON.stringify-யையும், அவற்றை வாசிக்க JSON.parse-யையும் நீங்கள் பயன்படுத்த வேண்டும்.

ஒரு auth store-ஐ கட்டமைப்பதற்கான எளிய வழி இதோ:

  • பயனர் மற்றும் டோக்கனை (token) localStorage-இல் சேமிக்கவும்.
  • store மற்றும் பிரவுசர் சேமிப்பகத்தைப் புதுப்பிக்க ஒரு login செயல்பாட்டைப் பயன்படுத்தவும்.
  • இரண்டையும் அழிக்க ஒரு logout செயல்பாட்டைப் பயன்படுத்தவும்.

இது Redux உடன் எவ்வாறு ஒப்பிடுகிறது?

Redux-க்கு dispatchers மற்றும் reducers தேவைப்படும். இது அதிகப்படியான boilerplate குறியீடுகளை உள்ளடக்கியது. Zustand உங்களை நேரடியாக ஒரு செயல்பாட்டை அழைக்க அனுமதிக்கிறது. இது குறைந்த மன ரீதியான சுமையையும் (mental overhead) குறைந்த அமைப்பையும் (setup) கொண்டுள்ளது.

தவிர்க்க வேண்டிய பொதுவான தவறுகள்:

  • create செயல்பாட்டில் ஒரு பொருளை (object) திருப்பிக் கொடுக்க மறப்பது. உங்கள் பொருளைச் சுற்றி அடைப்புக்குறிகளை (parentheses) பயன்படுத்தவும்.
  • உங்கள் state பொருளுக்குள் செமிகோலன்களைப் (semicolons) பயன்படுத்துவது. அதற்குப் பதிலாக கமாக்களைப் (commas) பயன்படுத்தவும்.
  • ஏற்கனவே ஒரு சரமாக (string) இருக்கும் தரவை parse செய்வது.

நிலை மேலாண்மை நூலகங்கள் (libraries) நிலையை நிர்வகிப்பதைப் பற்றியது அல்ல. அவை சிக்கல்களை நிர்வகிப்பதைப் பற்றியது.

ஒவ்வொரு API-யையும் மனப்பாடம் செய்ய முயற்சிக்காதீர்கள். அந்தத் கருவி தீர்க்க முயலும் சிக்கலைப் பார்க்கத் தொடங்குங்கள். சிக்கலைப் புரிந்துகொண்டால், அந்தக் கருவி உங்களுக்குப் புரியும்.

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