Zustand বোঝা
স্টেট ম্যানেজমেন্ট প্রায়ই খুব জটিল মনে হয়।
আপনি জানেন কীভাবে React useState ব্যবহার করতে হয়। আপনি জানেন কীভাবে props পাস করতে হয়। আপনি জানেন কীভাবে state lift up করতে হয়।
কিন্তু আপনার অ্যাপ বড় হওয়ার সাথে সাথে সবকিছু এলোমেলো হয়ে যায়। আপনি এমন সব কম্পোনেন্টের মাধ্যমে ডেটা পাস করতে শুরু করেন যাদের আসলে ওটার প্রয়োজন নেই। একেই বলে prop drilling। এটি আপনার কোডকে অগোছালো এবং রক্ষণাবেক্ষণ করা কঠিন করে তোলে।
Zustand এই সমস্যার সমাধান করে। এটি আপনার React কম্পোনেন্টগুলোর বাইরে একটি shared state প্রদান করে।
এভাবে চিন্তা করুন:
Zustand ছাড়া: Component A থেকে B-তে props যায়, B থেকে C-তে, এবং C থেকে D-তে।
Zustand সহ: প্রতিটি কম্পোনেন্ট সরাসরি একটি central store-এর সাথে যোগাযোগ করে। কোনো মধ্যস্থতাকারী নেই। কোনো prop drilling নেই।
একটি Zustand store দুটি জিনিস নিয়ে গঠিত:
- State: আপনার ডেটা।
- Actions: ফাংশন যা আপনার ডেটা পরিবর্তন করে।
এটুকুই শুধু।
Zustand দ্রুত কাজ করে কারণ এটি শুধুমাত্র সেই কম্পোনেন্টগুলোকে re-render করে যেগুলো পরিবর্তিত হওয়া নির্দিষ্ট ডেটা ব্যবহার করে।
যদি আপনি চান যে পেজ রিফ্রেশ করলেও আপনার ডেটা থেকে যাক, তবে localStorage ব্যবহার করুন। যেহেতু localStorage শুধুমাত্র string সংরক্ষণ করে, তাই অবজেক্ট সেভ করতে আপনাকে JSON.stringify এবং সেগুলো পড়ার জন্য JSON.parse ব্যবহার করতে হবে।
একটি auth store সাজানোর একটি সহজ উপায় এখানে দেওয়া হলো:
- user এবং token localStorage-এ সংরক্ষণ করুন।
- store এবং browser storage আপডেট করতে একটি login function ব্যবহার করুন।
- উভয়টি মুছে ফেলতে একটি logout function ব্যবহার করুন।
Redux-এর সাথে এর তুলনা কেমন?
Redux-এর জন্য dispatcher এবং reducer প্রয়োজন হয়। এতে প্রচুর boilerplate code লিখতে হয়। Zustand আপনাকে সরাসরি একটি ফাংশন কল করতে দেয়। এতে মানসিক চাপ কম এবং সেটআপও অনেক সহজ।
এড়িয়ে চলার মতো সাধারণ ভুলগুলো:
- create ফাংশনে অবজেক্ট রিটার্ন করতে ভুলে যাওয়া। আপনার অবজেক্টের চারপাশে parentheses ব্যবহার করুন।
- state অবজেক্টের ভেতরে semicolon ব্যবহার করা। এর পরিবর্তে comma ব্যবহার করুন।
- যে ডেটা ইতিমধ্যে একটি string, সেটি parse করা।
স্টেট ম্যানেজমেন্ট লাইব্রেরি মানে শুধু স্টেট ম্যানেজ করা নয়। এগুলো মূলত জটিলতা (complexity) ম্যানেজ করার জন্য।
প্রতিটি API মুখস্থ করার চেষ্টা বন্ধ করুন। টুলটি কোন সমস্যা সমাধানের চেষ্টা করছে তা দেখা শুরু করুন। যখন আপনি সমস্যাটি বুঝতে পারবেন, তখন টুলটি আপনার কাছে অর্থবহ মনে হবে।
উৎস: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11