আপনার স্টেট স্ট্যাক (State Stack) নির্ধারণকারী প্রশ্নটি
Redux-এর সাথে React Query-এর তুলনা করা বন্ধ করুন।
আপনি কী তৈরি করতে যাচ্ছেন তা জানার আগেই হাতুড়ি নাকি স্ক্রু-ড্রাইভার চান তা জিজ্ঞাসা করার মতো এটি। Redux, React Query, এবং Zustand—সবই ভিন্ন ভিন্ন সমস্যার সমাধান করে।
আসল সিদ্ধান্তটি আসে একটি প্রশ্ন থেকে: প্রতিটি স্টেট (state)-এর তথ্যের মূল উৎস (source of truth) কার কাছে?
আপনার কাছে দুই ধরণের সত্য (truth) আছে।
১. নিজস্ব সত্য (Owned Truth) ক্লায়েন্টই হলো এর উৎস। এর মধ্যে অন্তর্ভুক্ত থাকতে পারে:
- সাইডবার কি খোলা আছে?
- বর্তমান থিম কোনটি?
- ফর্মের কোন ধাপটি সক্রিয়? এই স্টেটটি আপনার স্থানীয় সিদ্ধান্তের ওপর ভিত্তি করে চলে। এটি সার্ভারের মাধ্যমে পুনরায় যাচাই করার প্রয়োজন নেই।
২. ধার করা সত্য (Borrowed Truth) এর উৎস থাকে সার্ভারে। ক্লায়েন্ট কেবল সেই ডেটার একটি প্রতিফলন (mirror) ধারণ করে। এই ডেটা আপনার অজান্তেই পরিবর্তিত হতে পারে। আপনার কাজ হলো এগুলো পরিচালনা করা:
- Staleness (ডেটা পুরনো হয়ে যাওয়া)
- Invalidation (ইনভ্যালিডেশন)
- Refetching (রিফেচিং)
- Caching (ক্যাশিং)
বেশিরভাগ ডেভেলপারই সমস্যার সম্মুখীন হন কারণ তারা উভয় কাজের জন্য একটিই টুল ব্যবহার করেন। যখন আপনি ক্লায়েন্ট-সাইড রিডিউসার (client-side reducer)-এ 'ধার করা সত্য' পরিচালনা করার চেষ্টা করেন, তখন আপনি আসলে React Query-কে খুব নিম্নমানেরভাবে পুনরায় লিখছেন। আপনি ম্যানুয়ালি লোডিং স্টেট, এরর হ্যান্ডলিং এবং ক্যাশিং লিখছেন। এটি প্রচুর পরিমাণে অপ্রয়োজনীয় কোড তৈরি করে।
জয়ী হতে এদের আলাদা করুন।
'ধার করা সত্য'-এর জন্য React Query ব্যবহার করুন। এটি কঠিন সিনক্রোনাইজেশন (synchronization) কাজগুলো সামলায়। 'নিজস্ব সত্য'-এর জন্য Zustand ব্যবহার করুন। এটি কোনো জটিলতা ছাড়াই সাধারণ ভ্যালু স্টোরেজ পরিচালনা করে।
সার্ভারের ডেটা Zustand-এ ঢেলে দেবেন না। সেই সীমানাটি স্পষ্ট রাখুন।
Redux এবং Sagas-এর ক্ষেত্রে কী হবে? Sagas ডেটা ফেচিং (data fetching)-এর জন্য নয়। এগুলো সময়ের সাথে জটিল প্রক্রিয়াগুলো পরিচালনা (orchestrate) করার জন্য। যদি আপনার অ্যাপ নিচের বিষয়গুলো হ্যান্ডেল করে, তবে সেগুলো ব্যবহার করুন:
- Concurrent, cancellable flows (একই সাথে চলা এবং বাতিলযোগ্য ফ্লো)।
- Real-time websocket streams।
- Complex state machines।
আপনি যদি React Query ব্যবহার করেন এবং আপনার Sagas কোনো কাজ না করে, তবে আপনার সেগুলোর প্রয়োজন নেই।
তৃতীয় একটি উপায় আছে: ইউনিফিকেশন (Unification)। RTK Query এবং Redux আপনাকে সবকিছু একটি স্টোরে (store) রাখার সুযোগ দেয়। এটি আপনাকে আপনার পুরো অ্যাপের একটি একক স্ন্যাপশট প্রদান করে। এটি ডিবাগিং (debugging), লগ আউট এবং অফলাইন পারসিস্টেন্স (offline persistence)-কে অনেক সহজ করে তোলে।
আপনার প্রয়োজন অনুযায়ী পথ বেছে নিন:
- React Query + Zustand: কম জটিলতা প্রয়োজন এমন ছোট টিমের জন্য সেরা।
- Redux + Sagas: ট্রেডিং অ্যাপের মতো উচ্চ-কনকারেন্সি (high-concurrency) ডোমেইনের জন্য সেরা।
- RTK Only: একটি একক সোর্স অফ ট্রুথ (single source of truth) প্রয়োজন এমন বড় এন্টারপ্রাইজ টিমের জন্য সেরা।
কোনো টুল বেছে নেওয়ার আগে নিজেকে প্রশ্ন করুন, স্টেটটি কি আদৌ ক্লায়েন্টে থাকা প্রয়োজন? সার্ভার কম্পোনেন্টগুলো (Server Components) এই লজিকের অনেকটা অংশ আবার সার্ভারে ফিরিয়ে আনছে।
প্রথমে খুঁজে বের করুন সত্যের মালিক কে। টুলটি নিজে থেকেই ঠিক হয়ে যাবে।