Redux কি?
Redux একটি জাভাস্ক্রিপ্ট লাইব্রেরি,যা মূলত স্টেট ম্যানেজ করার জন্যে ব্যবহার করা হয় । বর্তমান সময়ে এটি React এবং React Native এপ্লিকেশন এর state ম্যানেজ করার জন্যে জনপ্রিয় লাইব্রেরি। Redux আর React সম্পূর্ণ আলাদা দুইটা লাইব্রেরী। যদিও React আর Redux এর সম্পর্কটা এখন এমনই জোরদার যে সবজায়গায়ই দুইটা একসাথে ব্যবহার হয়। যদি কেউ মনে করে থাকি Redux, React এর অংশ বা ডিপেন্ডেন্সি তাহলে ভুল ধারনা। Angular,Vue,Vanila js এই সব জায়গাতে চাইলে Redux ব্যবহার করতে পারি। তবে আমরা এই আলোচনা তে React এর সাথে Redux ব্যবহার করে কিভাবে কাজ করে এটা দেখব। শুধু মাত্র যাতে ভুল ধারণা যাতে না থাকে, এই জন্যে এই বিষয় টা জেনে নেয়া জরুরি । আচ্ছা আমরা এতক্ষণে বুঝতে পারলাম Redux মূলত application state ম্যানেজ করার জন্য ব্যবহার করা হয়। তাহলে এক নজরে state কি জিনিস একটু দেখে আসা যাক।
State মূলত একটি অবজেক্ট যেটি কম্পোনেন্ট এর নির্দিষ্ট তথ্য বা ডেটা ধারণ করে। যেহেতু React এর সব কিছুই কম্পোনেন্ট , সেহেতু যখন আমরা React এর component state নিয়ে কাজ করব তখন আমাদের দরকার হবে আলাদা আলাদা component state থেকে ডাটা অন্য কম্পোনেন্ট এ পাঠানো। তখন আমরা “Props” এর মাধ্যমে ডাটা পাঠিয়ে state ম্যানেজ করে করতে পারি।
এখন আমরা যারা React নিয়ে কাজ করি, প্রশ্ন আসতে পারে যেখানে “Props” মাধ্যমে যখন ডাটা পাঠাতে পারছি সেখানে Redux এর কি দরকার।আমরা কেন Redux ব্যবহার করব ?
আমরা জানি ReactJs ইউনিডিরেকশনাল সিস্টেম এ “Props” পাস্ করে থাকে অর্থ্যাৎ ডাটা প্যারেন্টস নোড থেকে চাইল্ড নোড এ পাস্ হয়। এখন যদি চাইল্ড নোড থেকে প্যারেন্ট এ ডাটা পাস্ করার দরকার হয় , এটা ReactJs এ আমরা পারব নাহ। তবে আমরা প্যারেন্টস থেকে চাইল্ড এ ডাটা পাস্ করতে পারি।
ধরুন আমাদের একটা প্যারেন্ট এর ভিতর দুইটা চাইল্ড কম্পোনেন্ট আছে। এখন আমরা চাচ্ছি একটা চাইল্ড কম্পোনেন্ট হতে আরেকটা চাইল্ড কম্পোনেন্ট কন্ট্রোল করতে, তাহলে কিভাবে করব ? নিচের ডায়াগ্রাম এর দিকে লক্ষ্য করি।
Fig: Diagram-1
উপরের চিত্র তে কি বলা আছে একটু বিশ্লেষণ করে বোঝার চেষ্টা করি,
1.প্যারেন্ট কম্পোনেন্ট এ একটা ভ্যারিয়েবল count এবং একটা ফাংশন setCount() ডিক্লেয়ার করা হয়েছে। setCount() ফাংশন দ্বারা ভ্যালু আপডেট করার জন্য useState হুকের ব্যবহার করা হয়েছে ।
2.count, setCount “props” এর মাধ্যমে children1 এ পাস্ করেছি। এবার children1 কম্পোনেন্ট থেকে রিসিভ করে একটা ফাংশন বানিয়েছি যেটা onClick ইভেন্ট দ্বারা, প্রতি ক্লিক এ count এর ভ্যালু ১ করে বাড়বে।
3.children2 তে count ভ্যালু রিসিভ করে <p> এর মাধ্যমে ভ্যালু দেখানো হয়েছে।
এটা খুবই সহজ এবং মজার তাই নাহ !
এবার আমরা আরেকটা ফ্লো বোঝার চেষ্টা করি।
Fig: Diagram-2
আগের ফ্লো থেকে এই টা বেশ জটিল। এখানে ৮ টা চাইল্ড রয়েছে। আমরা ৭ নাম্বার কম্পনেনেন্ট থেকে ৮ নাম্বার কম্পোনেন্ট এর states চেঞ্জ করতে যাব তখন বেশ জটিল হয়ে যাবে তাই নাহ ?এটার জন্যে উপরের চিত্রে যে পদ্ধতি ব্যবহার করা হয়েছে এটাকে props injection বলে। যার মাধ্যমে প্যারেন্ট থেকে চাইল্ড এ ডাটা ট্রি আকারে উভয় পাশে পাঠানো হয়।
দুই পাশের চাইল্ড এর ফ্লো কিভাবে গিয়েছে একটু দেখি।
setCount,count => Parent > children 1 > children 4 > children 7 ===>controller Function ,state variable
count => Parent > children 2 > children 5 > children 8 ===>State Variable
মাত্র ৮ টা কম্পোনেন্ট ম্যানেজ করতে গিয়ে আমাদের হিমশিম খেতে হচ্ছে। বৃহৎ এপ্লিকেশন এ তাহলে কি ভাবে ম্যানেজ করতে হবে একবার চিন্তা করুন। এই সব সমস্যা সমাধান এর জন্যে আমাদের Redux এসেছে।
Fig: Diagram-3
এখন মাঝখানের নোড Redux যা সকল Component এর সাথে সংযুক্ত। যখন আমাদের count ভ্যারিয়েবল আপডেট করার দরকার হবে তখন আমরা সরাসরি Redux এ আপডেট করব। যখন Redux আপডেট হবে তখন যে কম্পোনেন্ট এ ভ্যারিয়েবল আপডেট হওয়ার দরকার হবে শুধুমাত্র কল করবে সাথে সাথে আপডেট হয়ে যাবে।
আমরা কিভাবে Redux এর সাথে পুরা React এপ্লিকেশন সংযুক্ত থাকে এটা বুঝতে পারলাম।
Redux কিভাবে কাজ করে :Diagram-3 তে আমরা Redux কীভাবে সকল কম্পোনেন্ট এর সাথে কমিউনিকেশন করে তাই দেখেছি। টেকনিক্যালি ঠিক আছে, কিন্তু আসলেই কিভাবে Redux কিভাবে কমিউনিকেশন করে এটা উক্ত ডায়াগ্রাম দেখে বুঝতে গেলে সঠিক হবে নাহ। Redux পুরা এপ্লিকেশন কে একটা র্যাপার এর মধ্যে আবদ্ধ রাখে। React যেহেতু সিংগেল পেজ এপ্লিকেশন এই জন্যে এর প্যারেন্ট কম্পোনেন্ট কে আবদ্ধ করে রাখলে সকল চাইল্ড কম্পোনেন্ট এক্সেস নিতে পারে। আরেকটা ফ্লো এর মাধ্যমে দেখি Redux আসলে কিভাবে কাজ করে কোন এপ্লিকেশন এর সাথে।
Fig: Diagram-4
উপরের ডায়াগ্রাম থেকে বোঝা যাচ্ছে, যেভাবে রিডাক্স পুরো এপ্লিকেশন কে আবদ্ধ করে রেখেছে সকল ফাংশন এবং স্টেট যেকোনো কম্পোনেন্ট থেকে এক্সেস করা বেশ সহজ সাপেক্ষ ।
এখন Redux এর হুক সম্পর্কে জানা যাক। Redux মূলত যে তিনটি ধারণা এর উপর দাঁড়িয়ে আছে
Store :Redux এপ্লিকেশনের সব ডাটা একটা জায়গায় সেইভ করে রাখে আর সেটাকেই Store বলে
Reducer :Redux সরাসরি এই স্টোর এ চেঞ্জ করতে দিবে না। Redux কে আগে থেকে বলে দিতে হবে কি ঘটলে’ Store এ কি রকম চেঞ্জ করতে হবে, এটাই হলো Reducer.
Action :আর ‘কি ঘটেছে’ এটা জানানোর জন্য যে বার্তা পাঠাতে হবে Redux এর কাছে সেটা হলো Action.
বিষয় টা অত্যন্ত কনফিউশন এর তাই তো ? চলুন একটি সুন্দর উদাহরণ এর মাধ্যমে আমরা সামনে বোঝার চেষ্টা করি।
রিডাক্স কে আমরা একটি ব্যাংক এর সাথে তুলনা করতে পারি,যাকে আমরা দায়িত্ব দিয়েছি আমাদের যাবতীয় টাকা পয়সা ম্যানেজ করার। ধরি সেই ব্যাংকের লকার হচ্ছে রিডাক্স স্টোর।এখন এই একাউন্ট এ যে কোনো রকম এর পরিবর্তন করলে (যেমন টাকা উঠালে, টাকা জমা রাখলে) একাউন্ট এর স্টেট চেঞ্জ হয়ে যাবে।এই যে স্টেট চেঞ্জ এর জন্য কি করতে হবে সেটি হচ্ছে (reducer)এবং কি করা হচ্ছে সেটা হচ্ছে (action) আর যখন অ্যাকশন ডিসপ্যাচ করা হচ্ছে , এখন ব্যাঙ্ক জানে যে তাকে কি করতে হবে , সুতরাং সে সুন্দর মতন কাজগুলো করে ফেলবে ।
আরেকটা মজার জিনিস দেখি । আমি তো নিজের টাকা পয়সা নিজেই ম্যানেজ করতে পারতাম । কিন্তু অনেক বেশী টাকা পয়সা হলে আমি ব্যাংকে রাখি কেন? কারণ আমি জানি হাতে বেশী টাকা রাখলে উল্টা-পালটা খরচ বেশী হয় আর আমি নিজে ঠিকমত ট্র্যাক রাখতে পারি না, কোথায় কখন কত খরচ করতেছ হিসাব থাকে না। কিন্তু অল্প টাকা হলে সেটা আবার ব্যাংকেও রাখার দরকার হয় না, কারণ ঐটা হাতে রাখাই ভালো। স্টেট ম্যানেজমেন্টের ব্যাপারটাও অনেকটা এই রকম, বেশী আর জটিল স্টেট ম্যানেজ করার জন্য আলাদা স্টেট ম্যানেজমেন্ট লাইব্রেরী লাগবে, নাইলে লাগবে না।
আবার আরেকটা ব্যাপার আছে, মনে করি ব্যাংকের আলাদা আরেকটা সার্ভিস আছে, যার কাজ হচ্ছে আমি এই রকম যতবার যত Action পাঠাব ব্যাঙ্কের কাছে সেটা সে লগ রাখবে। তাহলে দেখি , পরে কখনো আমি বা ব্যাংক এই লগ দেখে খুব সহজেই বুঝে ফেলতে পারব আমি আমার একাউন্টে কখন কি ট্রানজেকশন করছি আর পুরো চেইঞ্জ হিস্টোরিটাও ক্লিয়ার হয়ে যাবে। তাতে করে তুমি বা ব্যাংক কেউ কাউকে হিসাব গন্ডগোলের জন্য বিনা কারণে দোষারোপ করতে পারব না। এই বুদ্ধিটাই Redux এ ইউজ হচ্ছে। তবে এই লগ Redux নিজে রাখে না। Redux devtools বা এই রকম টুলস এই কাজ করে থাকে , এগুলো Redux এর সাথে মিলে এই লগিং এর কাজটা করে।
তাহলে আসলে কি ঘটছে একটু সংক্ষেপে আলোচনা করব।
কিন্তু তার আগে আমরা react প্রজেক্ট এ redux সেটআপ করা দেখে নেই।
Fig: Diagram-5
উপরে স্টোর কিভাবে সেটাপ করা হয় সেটা দেখানো হয়েছে। অচেনা যে সকল ফাংশন দেখছি কোডের নিচে কমেন্ট করে দেয়া হয়েছে যে কোনটা কি কাজ করে।
Fig: Diagram-6
“react-redux”একটা ফাংশন দিয়ে থাকে Provider নামে ।এর সাথে আমরা redux store টা কানেক্ট করে থাকি react এপ্লিকেশন এর সাথে ।
Fig: Diagram-7
চিত্র Diagram-7 এর সারসক্ষেপন টা দেখে নেই
১।ব্যবহারকারী কল করবে action । কল অপারেশন হিসেবে কাজ করবে Dispatch । এটা আমাদের setCount ফাংশন কল করার মত ।
২।যখন action টি কোন কম্পোনেন্ট থেকে dispatched হবে,তখন Action Type এর উপর নির্ভর করে, Reducer বুঝবে যে তার কি আপডেট করা দরকার ।
৩।যখন Reducer তার অপারেশন শেষ করবে, তখন store আপডেট হবে ।
৪ ।সব শেষে Store অন্য কম্পোনেন্ট কে জানিয়ে দেবে যে আমার স্টেট আপডেট হয়েছে তুমি ডাটা আপডেট কর । একটা বিষয় জানা খুবই দরকার সেটা হচ্ছে redux সকল কম্পোনেন্ট কে কিন্তু বলে নাহ যে স্টেট আপডেট হয়েছে , শুধুমাত্র যে কম্পোনেন্ট subscribe করে ।
Subscribe কি জিনিস? redux দ্বারা কোন অপারেশন সম্পন্ন হলে ওইটা react এপ্লিকেশন কিভাবে রিড, রাইট করতে পারবে বা এক্সেস করতেপারবে এর জন্য "react-redux " আলাদা দুইটা হুক দিয়ে থাকে ।
আমরা কোড দেখে বোঝার চেষ্টা করি ।
Fig: Diagram-8
useSelector: useSelector কাজ অনেকটা রিড করার মতন । কোন ভ্যালু আপডেট হলে আমরা এর মাধ্যমে রিড করতে পারি । এই হুকটি দিয়ে কম্পোনেন্ট টি subscribe করা হয় । যখন redux এর state পরিবর্তন হয় তখন listening করে নটিফাইড করে উক্ত কম্পোনেন্ট কে । উপরের কোডে যে কাজ টি হবে ,যখন reducer থেকে state চেঞ্জ হবে তখন count এর মান আপডেট হবে , এবং উহা numberCount এ স্টোর হয়ে ব্রাইজার এ দেখাবে .
useDispatch:এটি একটি ফাংশন যা ইমপোর্ট করা হয় react-redux লাইব্রেরি থেকে।এর মাধ্যমে খুব সহজেই আমরা যে কোন action, dispatch করতে পারব শুধুমাত্র আর্গুমেন্ট হিসেবে action কে ব্যবহার করে এবং store এ পরিবর্তন পারব।
Actions Creator :এখানে আমরা ডিফাইন করি কি ধরনের actions আমাদের দরকার ।
Fig: Diagram-9
প্যারামিটার একটা ভ্যালু রিসিভ করে । আমরা ইনিশিয়ালি 1 পাস করে রেখেছি । Action এর ভিতর দুইটা অবজেক্ট থাকে একটা অবজেক্ট রিটার্ন করে Type এবং payload । পুরা অবজেক্ট টা Reducer রিসিভ করে type এর মাধ্যমে Reducer বুঝতে পারে কি করা দরকার ।
Fig: Diagram-10
Type ডিক্লেয়ার আমরা চাইলে Action এর ভিতর ও ডিক্লেয়ার করতে পারি ,তবে আলাদা ফাইল এ ডিক্লেয়ার করা উত্তম । Payload,reducer কে বলে দেয় যে নতুন আপডেট ভ্যালু টা কি হবে ।
Reducer: এখানে সব অপারেশন বলে দেয়া হয়। Redux এর মস্তিষ্ক বলা যেতে পারে এটাকে ।
Fig: Diagram-11
Reducer, initialState ধারণ করে থাকে । initialState হিসেবে initialValue পাস করা হয় । reducer ফাংশন দুইটা প্যারামিটার রিসিভ করে state এবং action । এখানে আমাদের initialState হিসেবে ০ পাস করা হয়েছে । যখন আমাদের setCount , dispatch হয় তখন countReducer ফাংশন কল হয় ,এবং Type এবং payload এর উপর ভিত্তি করে ভ্যালু আপডেট হয় ।মানে count স্টেট টা পরিবর্তন হয় ,এবং ভ্যালু increment হচ্ছে .