Redux নিয়ে হতাশা?

সত্যি বলতে আমিও 😩। তবুও চলেন না একসাথে গল্পের মাধ্যমে একটু দেখি 😊।

Redux শিখব কিন্তু Redux কী সেটা জানব না? 🤔
আসেন তাহলে, Redux হলো একটি স্টেট ম্যানেজমেন্ট টুল বা মাধ্যম। এটি React অ্যাপ্লিকেশনকে (যে কোন JavaScript ফ্রেমওয়ার্ক এর সাথে ব্যবহার করা যায়) পরিচালনা এবং এক জায়গায় সংরক্ষণ করে। Redux আমাদের অ্যাপ্লিকেশনের state গুলোকে centralized এবং predictable করে।

যাইহোক, এগুলো বইয়ের ভাষা। আমরা গল্পে চলে যাই কেমন 😊
⚠️ ও হ্যাঁ, কয়েকটি ইংরেজি শব্দ মনে রাখবেন, সেগুলো হলো - Redux, Store, Action, Reducer এবং View বা Component।

⏩ চলুন গল্প শুরু করি ~

মনে করেন, আপনার একটি পিজ্জা শপ আছে। Redux শেখার সময় আপনার পিজ্জা শপে একসঙ্গে অনেক গুলো অর্ডার আসছে। এখন আপনি তারাতারি অর্ডার গুলো নেয়ার জন্য স্টাফদের ডাকলেন এবং তারা নিল। কিন্তু কোন স্টাফ কার এবং কখন অর্ডার নিল, কখন ডেলিভারি করতে হবে— এগুলা মিলাতে না পেরে আপনার চুল ছিঁড়া অবস্থা। তাই এই অবস্থা এড়াতে আপনি ম্যানেজার নিয়োগ দিলেন, তিনি একটা রেকর্ড বুক নিয়ে সব অর্ডার লিখে রাখলেন। এতে সব কাজ ও হিসেব সহজ হলো।

💠 এখন ধরে নিন:

🧑‍💼 পিজ্জা শপের ম্যানেজার: Redux
📒 অর্ডারের রেকর্ড বুক: Store
📋 অর্ডার নেওয়ার কাগজপত্র: Action
🧑‍🍳 অর্ডার প্রসেসিং স্টাফ: Reducer
🍕 পিজ্জা বানানো ও ডেলিভারি দেওয়া: View বা React Component

চেনা চেনা লাগছে কি? না লাগলে আপনি ফাঁকি দিয়ে গল্প পড়েছেন 😄

🤔 আপনার মনে প্রশ্ন আসতেই পারে...

▶️ ম্যানেজার (Redux) কিভাবে কাজটি করে ফেললো?

ম্যানেজার (Redux) কাস্টমার ও স্টাফ এর মাঝখানে একটি নোটবুক নিয়ে বসল। প্রতিটি অর্ডারের ইনফরমেশন লিখে রাখল, ফলে সবকিছু মাঝখান থেকে সুন্দরভাবে ম্যানেজ করতে পারল।

তেমনি ভাবে একটা অ্যাপ্লিকেশনে Redux সমস্ত state গুলোকে Centralized করে ফেলে, যার ফলে অ্যাপ্লিকেশনের যেকোন অংশ থেকে যেকোন state কে Access করা যায়। এতে অ্যাপটি becomes organized and efficient.

▶️ Store কী?

Redux এর Store হলো একটি object যা অ্যাপ্লিকেশনের পুরো state ধারণ এবং পরিচালনা করে।

এই যে দেখুন না, আপনার পিজ্জা শপে রেকর্ড বুকটা হলো Store। কেননা সমস্ত অর্ডার গুলো কিন্তু এখানেই জমা থাকে।
তাহলে বুঝলাম, যেখানে পুরো Application এর state গুলো জমা থাকবে তাকেই Redux এ store বলে।

▶️ Action কী জিনিস?

Redux এ Action হলো একটি JavaScript Object, যা বলে দেয় অ্যাপ্লিকেশনের state-এ ঠিক কী পরিবর্তন করতে হবে।

Action এর মাধ্যমে Store-এ ডেটা পাঠানো হয় এবং Reducer সেই Action অনুযায়ী নতুন state তৈরি করে।

Action এ সাধারণত দুইটি জিনিস থাকে:

type (required): এটি বলে দেয় Action-এর ধরন কী বা কী কাজ করবে।
payload (optional): state এর জন্য পাঠানো ডাটা যা আমরা state-এ রাখতে চাই।

উদাহরণ:
একজন কাস্টমার একটা পিজ্জার অর্ডার দিল। এই অর্ডারটা হলো Action, যা জানায় কাস্টমার কী চায় — এটাই হলো type।
এখন কাস্টমার বলল, তার পিংক কালারের পিজ্জা 🤭 লাগবে — এটাই হলো payload।

▶️ Reducer আবার কী? সেটা দিয়ে কী করে?

Reducer হলো একটি pure function, যা Redux এর state এবং action ইনপুট হিসেবে নেয় এবং নতুন state রিটার্ন করে।

এটি Action এর নির্দেশনা অনুযায়ী Store-এ state আপডেট করে।

আবার গল্পে ফিরে আসি — ম্যানেজার অর্ডার প্রসেস করার জন্য কাকে ডাকবে?
অবশ্যই স্টাফদের।
স্টাফ বা Reducer হলো সেই লোক, যে অর্ডার দেখে বলে দেয় কীভাবে কাজ হবে।

⚠️ এখানে একটি জিনিস মনে রাখতে হবে — যদি Action type এর সাথে Reducer না মিলে, তাহলে current state টি return করবে।

যেমন আপনার স্টাফ দেখবে যদি Order এর ইনফরমেশন ঠিক থাকে তো পিজ্জা বানাবে, না হলে বানাবে না।

🥱 ভাই অনেক বকবক করলেন, এখন বলেন `View` বা `React Component` কী?

React Component Redux-এর অংশ নয়, তবে Redux state এবং Action এর সাথে কাজ করার জন্য React Component ব্যবহার করা হয়।

React Redux লাইব্রেরি Redux এবং React Component-এর মধ্যে যোগাযোগ তৈরি করে।

যখন কোন state আপডেট করা হয় তখন সাথে সাথে Component আপডেট হয়ে নতুন মানটি প্রদর্শন করে।

✅ যদি ভুল কিছু লিখে থাকি তাহলে ক্ষমাসুন্দর চোখে দেখবেন এবং ভুলটা সঠিক করে দিতে সাহায্য করবেন।
ধন্যবাদ 🥰🥰