Redux কি? Redux আর React কি একই জিনিস ?

শুরুতেই বলি Redux, React এর কিছু না । Redux আর React সম্পূর্ণ আলাদা দুইটা লাইব্রেরী। তবে React আর Redux এক সাথে ব্যবহার দেখে দেখে আমাদের মনে হতেই পারে যে Redux মনে হয় React এর একটা অংশ। এইটা ধারনা করা সম্পূর্ন ভুল , আসলে দুইটা ভিন্ন জিনিস। Redux দিয়ে আমরা মূলত State management এর কাজ করে থাকি । Redux যে কোনো UI লাইব্রেরী এর সাথেই ব্যবহার করা যায় যেমন - React , Angular, Vue ইত্যাদি।

State আবার কি ?

State এর সাধারণ অর্থ হলো ‘অবস্থা’, এই অবস্থা বুঝায় Data দিয়ে। ধরেন আপনি Learn With sumit এর ওয়েবসাইট এ আছেন। যদি আপনি লগিন অবস্থায় থাকেন তাহলে LWS এর database থেকে কিছু ডাটা আসবে, হতে পারে আমাদের THINK IN A REDUX WAY কোর্স যার কারনে আপনি ভিডিও গুলোর এক্সেস পাবেন এবং ওয়েবসাইট এর কিছু পরিবর্তন দেখতে পারবেন যা আপনি লগিন না থাকা অবস্থায় দেখতে পারবে না । এটাই হলো অবস্থা/State.

React কি নিজে state management করতে পারে না?

হ্যা, React অবশ্যই পারে । React এর কম্পোনেন্ট এর মধ্যে state রেখেই করা যায়। React এর Unidirectional Data Flow তে state manage করে মানে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে। সহজ করি একটা গাছ তার মূল দিয়ে পানি প্রবাহ করে কান্ডে, কান্ডে থেকে তার শাখায় তার পরে প্রশাখায় তার পরে পাতায়। উল্টো দিক থেকে কিন্তু করে না। এখন চিন্তা করোন এই পানি পাতায় পৌছাতে কতো ডাল পালার ভিতর দিয়ে নিয়ে যেতে হচ্ছে। এমনো তো হতে পারে এই মূহূর্তে কোনো একটা কান্ডের পানির প্রয়োজন নাই তাকেও কিন্তু পানি প্রবাহ করা লাগতেছে। ‘lifting state up’ মানে মূলে/প্যারেন্ট কম্পোনেন্টে পানি/ ডাটা রেখে কাজ করতেছে গাছ। মাঝে একটা ডলা গজালো এখন তার লাগবে খনিজ লবন তখন কি করবে গাছ। আবার শুরু থেকে তাকে খনিজ লবন প্রবাহ করে নিয়ে আসতে হবে এর কারনে তার এতো ডাল পালার ভিতর দিয়ে খনিজ লবন কাংখিত ডালে নিয়ে যেতে সে গিট্টু না বাজাইলেও তুমি গিট্টু বাজাইবা শিউর আমি আবার তোমার কম্পোনেন্ট স্ট্রাকচারও আবার নতুন করে করতে হবে। এমন যদি হতো ইস্পেসিফিক পাতায় / কান্ডে সরাসরি পানি/খলিজ লবন পৌছাতে পারতাম তাহলে সহজ হতো না?

হ্যা এতো ঝামেলা না করে সহজ একটা সমাধান এ আসি । আচ্ছা আসতেছি কাজের কথায় । এই সহজ কাজটাই আপনি করতে পারবেন Redux দিয়ে । Redux দিয়ে সরাসরি ওই ইস্পেসিফিক ডালকে খনিজ লবন দিতে পারতেন আপনি যদি Redux ব্যবহার করতেন।

তবে আপনি যদি নিয়ত করে থাকেন আমি সর্বদাই এলোপাথারি ভাবে প্রজেক্ট করবো, আমার প্রোপ্স পাস এর প্যারা ভালো লাগে বা আমার এপ্লিকেশন বড় হলেও আমি এই প্রোপ্স ডিলিং এর পেইন নিতে পারবো তাহলে আপনি React এর state দিয়েই কাজ চালাই দিতে পারবেন। আপনার জন্য Redux ম্যান্ডেটরি না, Redux এপ্লিকেশনের স্ট্রাকচার সঠিক ভাবে বানানোর জন্য প্রচুর সুবিধা দেয় আমাদের । Redux শিখার আগে এই কথা গুলো আপনার জানা অত্যন্ত প্রয়োজনী ছিলো।

আসোন এবার জানি Redux কি?

প্রথমেই বলছিলাম Redux একটা জাভাস্ক্রিপ্ট লাইব্রেরী। Redux এর মূল জিনিস হলো ৩ টাঃ

1. Actions

2. Reducers

3. Store

Redux এপ্লিকেশনের সব ডাটা একটা জায়গায় সেইভ করে রাখে আর সেটাকেই Store বলে। Redux সরাসরি এই স্টোর এ আপনাকে চেঞ্জ করতে দিবে না। আপনি Redux কে আগে থেকে বলে দিবেন ‘কি ঘটলে’ Store এ কি রকম চেঞ্জ করতে হবে, আর এটাই হলো Reducer (সব থেকে গুরুত্তপূর্ন পার্ট) . এই যে ‘কি ঘটছে’ এইটা জানানোর জন্য যেই ম্যাসেজটা পাঠাবে Redux এর কাছে সেটাই হলো Action. ব্যস এই হলো Redux.

উদাহরন দেই একটা তাহলে ভালো করে বুঝবেন । মোট কথা আপনার এপ্লিকেশনের স্টেট ম্যানেজ করার দায়িত্ব তো আপনি Redux কে দিছেন। এখন মনে করোন Redux হলো একটা ব্যাংক যে আপনার টাকা-পয়সার হিসাব রাখতেছে। ব্যাংক আপনাকে সরাসরি তার লকারে হাত দিতে দিবে না। আপনি ব্যাংকে বলবেন ভাই আমি ১০০০ টাকা জমা রাখতে চাই । এইযে বললেন আপনি টাকা রাখবেন এইটাই হলো Action. ব্যাংক তখন আপনার আগের টাকার সাথে সে নিজেই ১০০০ টাকা এড করবে , ধরেন আগে আপনার ছিলো ৫ টাকা কারন আপনি আমার মতো গরীব। হিসাব করে ব্যাংক নিজেই ১০০৫ টাকা করে ফেলবে। কারন কি বললে কি করতে তা হবে তা সে জানে আর এইটাই হলো Reducer. যখন আপনি সত্যিকারভাবেই কখনো ব্যাঙ্ককে গিয়ে এই কথা বলবেন তারমানে আপনি একটা Action কে dispatch করতেছেন ব্যাংকের কাছে, Redux এর ভাষায় । যেহেতু ব্যাংক জানে কি করতে হবে (Reducer এর কারণে) ,তাই সে সুন্দরমত সেই কাজগুলো করে ফেলবে। আবার আপনি ব্যাংক থেকে টাকা তোলবেন তাহলে আগে থেকেই ব্যাংকে আপনি subscribe করে থাকবে এবং ব্যাংক এ এখন আপনি টাকা তোলার Action দিলেই ব্যাংক আপনার কথা মতো Action dispatch করে নিজেই হিসাব করে আপনাকে টাকা দিবে যদি আপনার ব্যাংক এ যদি টাকা থাকে (টাকা থাকবে কারন আপনি এখন পাত্তিওয়ালা অনেক টাকার মালিক তাই বেশি টাকা রিডাক্স দিয়ে ম্যানেজ করতেছোন) এবং অবশিষ্ট টাকা সে নিজের কাছে রেখে দিবে। আপনার নিজের আর কোনো ঝামেলাই রইলো না

থিংক ইন এ রিডাক্স ওয়ে

রিডাক্স এর মৌলিক এবং আবশ্যিক বিষয়সমূহ বুঝার পাশাপাশি এই কোর্সের প্রজেক্ট ভিত্তিক শেখানোর পদ্ধতি আপনাকে একজন দক্ষ রিডাক্স প্রোগ্রামার হয়ে উঠতে সাহায্য করবে বলে আমাদের বিশ্বাস।    (সংগৃহীত)