সহজ, সরল, প্রমিত বাংলায় Redux

সেদিন অফিসে ঢুকে দেখি রাফসান চেয়ারে হেলান দিয়ে উদাসভাবে সিলিঙয়ের দিকে তাকায় কি যেন ভাবতেছে। জিজ্ঞেস করলাম-

- কি হে, কি খবর?
- এই তো ভাই আছি।
- উদাস উদাস লাগতেছে তোমাকে। ঝামেলা কোনো?
- না ভাই, তেমন কিছু না। Reactjs দেখা শুরু করছিলাম, মোটামুটি ভালোই বুঝতেছিলাম, তারপরে Redux দেখতে গিয়া সব কিছু কেমন জানি তালগোল পাকায় যাইতেছে। কইত্থেকে যে কি হইতেছে মিলাইতে পারতেছি না।
- তাই নাকি? Redux এর তো অনেক টিউটরিয়াল আছে। দেখা শুরু করলেই তো হয়।
- দেখছি ভাই। দেখার সময় মনে হয়, আচ্ছা, ঠিকই তো আছে। এম্নে এম্নে কাজ করে। কিন্তু পরে মনে হয়, কেমন জানি আউলাঝাউলা। কি সব action, reducer, immutability, store হাবিজাবি। এতো কাহিনী করার দরকারটা কি সেটাই বুঝতেছি না।
- আচ্ছা, বুঝছি। এটা অবশ্য ঠিক যে Redux এর মূল কন্সেপ্টটা আসলে তেমন জটিল কিছু না, কিন্তু ব্যাপারটা ‘বুঝে ফেলছি’ ফিলিং পাইতে একটু টাইম লাগে। আচ্ছা, আসো দেখি একটু চেষ্টা নিয়ে তোমাকে বুঝাইতে পারি কিনা। তুমি অবশ্য ভালো প্রোগ্রামার, আশা করি বেশী টাইম লাগবে না। তবে শর্ত আছে,তোমাকে যদি বুঝাইতে পারি তাহলে আমাকে আইসক্রিম খাওয়াইতে হবে। ফাও টাইম দিতে আমি রাজি না।
- আরে ভাইইই, এইটা কোনো কথা? খাওয়াইলাম নাইলে একটা আইসক্রিম। আপনি বড় ভাই মানুষ, আপনারে সম্মান কইরা তো এমনিতেই খাওয়াইতে পারি। এইটা কোনো ব্যাপার!

যাই হোক, রাফসানের সাথে আইসক্রিম ডিলে ওকে Redux বোঝানোর একটা চেষ্টা নেয়া যাক।

- প্রথমেই একটা কথা বলে নেই। আমি এখন তোমাকে Redux বুঝাবো কিন্তু এখানে React এর কিছু থাকবে না।
- কেন ভাই? React বাদ দিয়া Redux ক্যাম্নে?
- Redux তো React এর কিছু না।
- এই তো আবার দিতেছেন আউলাইয়া। Redux, React এর কিছু না মানে?
- মানে হইলো, Redux আর React সম্পূর্ণ আলাদা দুইটা লাইব্রেরী। যদিও React আর Redux এর সম্পর্কটা এখন এমনই জোরদার যে সবজায়গায়ই দুইটা একসাথেই ইউজ হয় আর ম্যাক্সিমাম টিউটরিয়াল বা এক্সাম্পলেই তুমি দেখবা এই দুইটা একসাথে আছে, কিন্তু তুমি যদি মনে করো Redux, React এর পার্ট বা ডিপেন্ডেন্সী তাহলে ভুল জানো। দুইটা আসলে ভিন্ন দুইটা জিনিস। এবং তুমি Redux যেই কাজটা করে অর্থাৎ State management, সেটা এই রকম অন্য কোনো একটা লাইব্রেরী দিয়ে করেও React এর সাথে ব্যবহার করতে পারবা। আবার Redux কেও অন্য অনেক UI লাইব্রেরী যেমন AngularJS, VueJS এইগুলার সাথে ব্যবহার করতে পারবা। দুইটা যে ইন্ডিপেন্ডেন্ট, এইটা ক্লিয়ার?
- জী ভাই, বুঝলাম। কিন্তু বললেন যে, Redux স্টেট ম্যানেজ করে, State জিনিসটা কি?
- এইটা একটা খুবই ভালো প্রশ্ন, Redux আসলে কি করে এইটা জানার জন্য এই প্রশ্নটা গুরুত্বপূর্ণ। State এর সাধারণ অর্থ তো হলো ‘অবস্থা’, এখন আমরা যখন application এর state বলি তখনও কিন্তু ঐ এপ্লিকেশনের অবস্থাই বোঝাই। তবে এই যে ‘অবস্থা’, এটা বোঝায় কি দিয়ে? Data দিয়ে, তাই না? মানে একটা অবস্থা বোঝানোর জন্য তো কিছু ইনফরমেশন লাগবে। মনে কর, ‘আজকে বেশ গরম পড়েছে’ এ অবস্থা ভালোভাবে ব্যাখ্যা করতে চাইলে তোমাকে আজকের তাপমাত্রা, বাতাসের আর্দ্রতা — এই তথ্যগুলো বলতে হবে। কারণ এগুলোই হচ্ছে মূল কারণ গরম লাগার। একইরকমভাবে তুমি কোনো একটা এপ্লিকেশন যখন ওপেন করো, তখন তুমি লগিন থাকলে এক রকম View পাচ্ছ, না থাকলে আরেক রকম , আবার কোনো বাটনে বা মেন্যুতে ক্লিক করলে View চেঞ্জ হয়ে যাচ্ছে — এই যে এপ্লিকেশনের বিভিন্ন অবস্থা, এগুলোর মূলে হচ্ছে এপ্লিকেশনে তুমি লগিন আছো কি নাই, সার্ভার থেকে কি কি ডাটা তোমার কাছে এসেছে এইগুলো। তো এইগুলোই আসলে একটা এপ্লিকেশনের State.
- আচ্ছা বুঝলাম। কিন্তু React….
- ওয়েট, বলতেছি। Redux যেটা করে সেটা হলো এপ্লিকেশনের স্টেট সুন্দরভাবে এবং এফিসিয়েন্টলি ম্যানেজ করে। এটা মূলত তখনই লাগে, যখন তুমি এপ্লিকেশনের UI ম্যানেজ করার জন্য React বা এই রকম কোনো UI ম্যানেজমেন্ট লাইব্রেরী ইউজ করবা। এখন তুমি নিশ্চয়ই জানো, React নিজেই State ম্যানেজ করতে পারে তাহলে Redux লাগবে কেন, তাই না? আসলে Redux লাগবে না, খালি React দিয়েই চলে।
- এইটা কি কন ভাই? Redux শিখাইতে বইসা যদি বলেন Redux লাগবে না, তাইলে ক্যাম্নে কি?
- শেষ করতে দিবা তো। Redux লাগবে না মানে কখনোই লাগবে না তা না। তুমি তো React দিয়ে কীভাবে স্টেট ম্যানেজ করা যায় দেখছো, দেখছো না?
- হুম। React এর ডকুমেন্টেশনে দেখছিলাম।
- এখন তোমাকে যদি খুব সিম্পল একটা To Do List এপ্লিকেশন বা এই রকম কিছু একটা বানাইতে বলি তুমি খালি React দিয়ে বানাইতে পারবা না?
- পারবো মনে হয়, এই রকম টিউটোরিয়াল দেখছিলাম মে বি।
- অবশ্যই পারবা। এই রকম সিম্পল কাজ করতে তোমার Redux লাগবেই না। React কম্পোনেন্টগুলোর মধ্যে State রেখেই করতে পারবা।
- তাহলে Redux লাগবে কখন?
- Redux কখন লাগবে এইটা তুমি বুঝবা যখন React দিয়ে একটু বড় মাপের এপ্লিকেশন বানাতে গিয়ে State ম্যানেজ করতে মাথা আউলায় যাবে তখন।
- আপনি তো এখনই মাথা আউলায় দিছেন। এই মাত্র বললেন, Redux লাগবেই না। আবার বলেন Redux ছাড়া State ম্যানেজ করতে গিয়ে মাথা আউলায় যাবে। মানে কি আসলে?
- উঁহু, সব এপ্লিকেশনে Redux ছাড়া state ম্যানেজ করতে মাথা আউলাবে না, একটু বড় মাপের এপ্লিকেশনে আউলাবে। কেন, এবার আসো সেটা বলি। তুমি আমাকে বলো, যে React এর Unidirectional Data Flow বুঝো?
- জী ভাই। এটার মানে হলো, আমরা React এ যে কম্পোনেন্টগুলা বানাবো সেগুলাকে তো একটা Tree এর মত চিন্তা করা যায়, মানে ছোটো ছোটো কিছু কম্পোনেন্ট নিয়ে কিছু বড় কম্পোনেন্ট, সেগুলোকে নিয়ে আরেকটু বড় কিছু কম্পোনেন্ট, এভাবে করে একেবারে রুট কম্পোনেন্ট, পুরো ট্রী এর মত আর কি। তো এই রকম কম্পোনেন্ট ট্রী এর সবসময় প্যারেন্ট কম্পোনেন্টগুলো থেকে তাঁর চাইল্ড কম্পোনেন্টে ডাটা পাস হবে। চাইল্ড থেকে প্যারেন্টের দিকে না। এটাই Unidirectional Data Flow.
- গুড। দেখো তো নীচের মত করে এই Unidirectional Data Flowব্যাপারটা ভিজুয়ালাইজ করা যায় কিনা?

Image Credit: This awesome article

-ইয়েস ভাই, পুরা এই রকম।
- আচ্ছা,বুঝলাম যে প্যারেন্টের কাছে যেই ডাটাটা আছে, সেটা প্যারেন্ট চাইল্ডের কাছে পাস করে দিলো। কিন্তু চাইল্ড যদি ঐ ডাটাটা চেঞ্জ করতে চায়, তাহলে কিভাবে করবে? কারণ ঐ ডাটা তো মূলত ঐ চাইল্ডের না, আর চাইল্ড যদি তাঁর কাছে যেই ডাটা এসেছে সেটায় চেঞ্জ করে তাহলে মূল স্টেটটা তো চেইঞ্জ হবে না আর অন্য চাইল্ডরাও তো সেটা জানবে না।
- জী ভাই, এজন্যই প্যারেন্ট থেকে ঐ স্টেট চেঞ্জ করার জন্য মেথড রেফারেন্স পাস করা হয় চাইল্ডের কাছে। চাইল্ড ,স্টেট চেঞ্জ করার জন্য ঐ মেথড রেফারেন্স দিয়ে কল করে প্যারেন্টের স্টেট চেঞ্জ করে দেয়, তাতে করে অন্য চাইল্ডরাও ঐ স্টেট চেঞ্জের আপডেট পেয়ে যায়।
- আচ্ছা, এবার ঠান্ডা মাথায় একটু ভাবো তো, তোমার এই কম্পোনেন্ট ট্রী-টা যদি অনেক বড় হয়, তাহলে এই যে স্টেট পাস করা, সাথে স্টেট চেঞ্জ করার জন্য মেথড রেফারেন্স পাস করা ব্যাপারটা কত বিচ্ছিরি অবস্থায় গিয়ে দাঁড়াবে? তোমার চিন্তার সুবিধার জন্য আরেকটা ছবি দেখাই, দাঁড়াও।

Image Credit: This awesome article

এখানে দেখতেছো যে, কোনো একটা চাইল্ড কম্পোনেন্ট তার প্যারেন্টে রাখা স্টেট চেঞ্জ করতে চাইলে সেটা তার প্যারেন্টের রেফারেন্স মেথড দিয়ে কল করে চেঞ্জ করে তারপর সেটা অন্য চাইল্ডদের কাছেও আপডেট হিসেবে পাস হয়ে যায়। এখন যদি অনেক বড় ট্রি হয়, তাহলে অবস্থাটা কি দাঁড়াবে?
-আচ্ছা, কিছুটা বুঝতে পারতেছি। ব্যাপারটা আসলেই খুব গোলমেলে হয়ে যাবে, ভাই।
- আরেকটা ব্যাপার কি চিন্তা করছ? তোমার কোন স্টেটটা কোন কম্পোনেন্ট এর মধ্যে রাখবা এটা চিন্তা করে বের করাটাও খুব ঝামেলা হয়ে যাবে। মানে তুমি কোনো একটা কম্পোনেন্টে ডাটা স্টোর করে দেখলা তার siblings বা তার চাইল্ড না এমন কারো এই ডাটা লাগতেছে, তখন তুমি কি করবা? এই স্টেটটাকে সরায় তাদের কমন কোনো এক প্যারেন্টে নিয়ে যাবা, যেটাকে React এর ভাষায় ‘lifting state up’ বলে, তাই না?
- আচ্ছা ভাই, তাহলে একটা কাজ করলে তো হয়। মনে করেন, আমি সব স্টেট আমার রুট কম্পোনেন্টে রেখে দিলাম। তারপরে সেখান থেকে চাইল্ড কম্পোনেন্টগুলাতে পাস করে দিলাম।
- হ্যাঁ, সেটা করা যায়। কিন্তু দেখো যে, মাঝখানের এমন অনেক কম্পোনেন্ট এই স্টেটগুলো carry করবে যাদের নিজেদের এই ডাটা লাগবেই না, তাঁদের কোনো এক চাইল্ডের চাইল্ডের হয়তো এই ডাটাটা লাগবে, তাই গুষ্টিসুদ্ধ সবাই এই ডাটা পাস করে করে যাবে, এইটা কিছু হইলো? আবার যেহেতু intermediate অনেক কম্পোনেন্ট এই ডাটা পাসিং ফ্লো এর অংশ তখন তুমি যদি পরে রি-ফ্যাক্টর করে মাঝখানের একটা কম্পোনেন্টকে সরায় ফেলতে চাও বা নতুন কম্পোনেন্ট ঢুকাতে চাও, তাহলে একটা গিট্টু লেগে যাবে না?
-সেটাও কথা।
- এখন এখানে এই ঝামেলাগুলা কেন হচ্ছে জানো? যখন তুমি React বা এই রকম লাইব্রেরী দিয়ে এপ্লিকেশন এর ফ্রন্ট-এন্ড ডেভেলপ করতেছো তখন এই লাইব্রেরীগুলো মূলত UI নিয়ে কাজ করবে, কিন্তু এটার জন্য তাদের যেই ডাটাগুলো নিয়ে কাজ করতে হবে সেটা যদি তাদেরকে ম্যানেজ করতে দেয়া হয়, তাহলেই একটু ঝামেলা হয়ে যাচ্ছে। আবার আরেকটা ব্যাপার দেখো যে, তুমি যখন UI এর কম্পোনেন্টগুলো নিয়ে চিন্তা করতেছো, তুমি কিন্তু মূলত UI ট্রি-টাকে কিভাবে এফিসিয়েন্টলি সাজানো যায় সেটা চিন্তা করতেছো, তারপরে সেটার মধ্যে স্টেটগুলোকে বসায় দিচ্ছ। কিন্তু স্টেট এর কমপ্লিট স্ট্রাকচারটা যদি চিন্তা করো সেটা কিন্তু ভিন্ন একটা ট্রি এবং সেটা কিন্তু UI ট্রি-টা থেকে আলাদা। সেজন্য ভালো বুদ্ধি হলো এই দুইটা ট্রি-কে আলাদা ম্যানেজ করা। এজন্যই মানুষজন UI ট্রি ম্যানেজের জন্য React ইউজ করে আর স্টেট ট্রি-টাকে আলাদাভাবে Redux দিয়ে হ্যান্ডেল করে। Separation of concern যাকে বলে আর কি, যে যেই কাজে ভালো তাকে দিয়ে সেটা করানো। তুমি তো PHP দিয়ে ব্যাক-এন্ডে কাজ করছো, ব্যাক-এন্ডে তুমি সব ডাটা কি PHP কোড এর ভিতরে রাখো? তা তো রাখো না, তুমি আলাদা ডাটাবেজ ইউজ করো ডাটা স্টোর করার জন্য, তাই না? Redux হলো অনেকটা ফ্রন্ট-এন্ডের ডাটাবেজের মত। যাই হোক, আগে যেটা বললাম, তোমার এপ্লিকেশন যদি ছোটখাটো হয়, তাহলে তোমার এতসব ঝামেলায় যাওয়ার দরকারই পড়বে না, কারণ তখন তোমার UI ট্রি-টাও তেমন বড় হবে না, তাই React এর মধ্যেই স্টেট ম্যানেজ করা যাবে, Redux লাগবে না।
- আচ্ছা, ভাই বুঝলাম। এবার তাহলে Redux বুঝান, যাতে লাগলে ইউজ করতে পারি।
- ঠিক আছে, বলছিলাম যে React নিয়ে কিছু বলবো না, এতক্ষণ কথা প্রসংগে কিছু React এর আলোচনা চলে আসছে, কিন্তু এবার আমরা মূল Redux এর আলোচনায় যাবো এবং এখন থেকে বাকি কথায় আর কোনো React নাই। ঠিক আছে?
- ওকে ভাই, React কে আপাতত তিন তালাক।
- আরে না, না। তালাক দেয়ার দরকার নাই, আপাতত ভুলে গেলেই চলবে। React ভালো জিনিস। যাই হোক, Redux বোঝার জন্য যেটা ইম্পরট্যান্ট সেটা হলো Redux এর মূল ফিলোসফিটা বোঝা। মানে এটার ভেতরের গূঢ় রহস্যটা বুঝলে পরে এটা বোঝা এবং এটা নিয়ে কাজ করা সহজ হবে। খালি এক্সাম্পল দেখে এটা কীভাবে ব্যবহার করতে হয় সেটা শিখলে জিনিসটা ভালো করে বোঝা হয় না। শুরু করি তাহলে?
- এতক্ষণ ধরে তো খালি শুরুই করতেছেন। :|
- ঘটনা সত্য। আসলেই অনেক কথা বলে ফেলছি। আচ্ছা, Redux এর মূল জিনিস হলো ৩ টাঃ

• Store
• Actions
• Reducers

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

এই কথা শোনার পর রাফসানের চেহারা হয়েছে এই রকমঃ

বুঝলাম যে বেচারা এখনো তালগোল ছাড়া অবস্থায় আছে। আরেকটু টাইম দিতে হবে।

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

আবারো রাফসানের চেহারা হয়েছে দেখার মতঃ

- মজা লন? জাস্ট একটা ভ্যারিয়েবল?
- Yup, খালি একটা ভ্যারিয়েবল। কারণ এই Store এর চেহারা আসলে কেমন হবে সেটা তুমি বলে দিবা। কারণ হতে পারে তোমার পুরা এপ্লিকেশনের ডাটা খালি একটা integer ডাটা, কিংবা একটা এ্যারে কিংবা একটা জাভাস্ক্রিপ্ট অবজেক্ট। এর বাইরে তো কিছু না। তোমার অনেক বেশী পরিমাণ ডাটা যদি লাগে তুমি সেটা জাস্ট একটা জাভাস্ক্রিপ্ট অবজেক্টে { ‘key’ : ‘value’ } pair করে করে রেখে দিবা। ব্যস। আর এই জিনিস স্টোর করার জন্য জাভাস্ক্রিপ্টের একটা ভ্যারিয়েবল ছাড়া আর কিছু লাগে? লাগে না।
- আচ্ছা, ভালো তো।
- তুমি বোধহয় পুরোপুরি বিশ্বাস করলা না ব্যাপারটা। আসো তোমাকে একটা জিনিস দেখাই। Redux এর Github পেইজে খুব সিম্পল একটা এক্সাম্পল দেয়া আছে প্রথম দিকে। নীচে আমি ওদের কমেন্টটা রিমুভ করে দিয়ে নিজে কমেন্ট করে দিলাম বোঝার সুবিধার জন্য। তুমি যদি Es6 এর সিন্ট্যাক্স মোটামুটি বুঝো তাহলে এই কোড বুঝতে প্রবলেম হবার কথা না। দেখোঃ

কোডটা দেখে তো মোটামুটি বোঝা যাচ্ছে, তাই না? কারণ এগুলো তো আমরা একটু আগেই বলে আসলাম, যে কীভাবে Redux কাজ করে, Store, Action, Reducer এগুলো। এর বাইরে তো এখানে কিছু নেই। কিন্তু আমরা এখনো জানি না, Redux ভেতরে কীভাবে কি করতেছে। একটা কাজ করি চলো, আমরা নিজেরা একটা Redux এর মতো লাইব্রেরী বানাই, তাতে করে বুঝতে সুবিধা হবে। Learning by building.
- Redux এর মত লাইব্রেরী বানাবো? ক্যাম্নে?
- দেখাচ্ছি। উপরের কোডে প্রথমে দেখো যে, Redux থেকে createStore কে import করছে। তাহলে আসো আমরা একটা ফোল্ডার বানাই যেটার নাম দিলাম ‘my-redux’ আর সেটার ভিতর একটা index.js ফাইল বসালাম আর সেখানে নীচের কোডটুকু লিখে ফেললাম।

import createStore from './createStore';
export { createStore };

তারমানে হচ্ছে আমরা আমাদের এই ‘my-redux’ ব্যবহার করতে চাইলে এখন আমাদের মূল কোডের প্রথম লাইনে ‘redux’ থেকে ইম্পোর্ট না করে এভাবে করবো।

import { createStore } from './my-redux';

Redux এর এক্সাম্পল কোডে আমরা আর কিছু চেঞ্জ করবো না। আমরা দেখবো আমাদের my-redux এর ভিতরে আমরা redux এর মত করে কাজ করতে পারি কিনা। তারমানে যেহেতু বাকি সব কাজ আসলে createStore এর ভিতরে, তাহলে এবার আসো আমরা ‘my-redux’ ফোল্ডারের ভেতর একটা createStore.js নামে ফাইল বানাই। আমরা আমাদের redux এর এক্সাম্পল কোডে দেখেছি যে createStore এর ভিতরে আমরা আমাদের reducer মেথড পাস করে একটা store বানিয়েছি। তারমানে বুঝতেই পারছি createStore একটা ফাংশন কন্সট্রাকটর যেটা কিনা একটা মেথডকে প্যারামিটার হিসেবে নেয়। তারমানে এরকমঃ

export default function createStore(reducer) { }

আর createStore একটা অবজেক্ট রিটার্ন করে যাতে আবার ৩ টা মেথড আছে, dispatch, getState, subscribe. তাহলে এগুলোও বানিয়ে ফেলা যাক।

export default function createStore(reducer) {
   function getState() {}
   function subscribe(listener) {}
   
   function dispatch(action) {}

   return {
	dispatch,
	getState,
	subscribe
   };
}

এবার শুধু আর একটাই কাজ বাকি সেটা হলো এই মেথডগুলো কে কি কাজ করতেছে সেটা বলে দেয়া। নীচে আমি সেটা কমেন্টসহ করে দিলাম।

ব্যস, হয়ে গেলো আমাদের Redux লাইব্রেরী বানানো। এই লিংকে গিয়ে দেখো যে, আমরা আমাদের এই লাইব্রেরীটা ব্যবহার করেই Redux এর দেয়া এক্সাম্পলটা দিয়ে সুন্দর একটা ডেমো বানিয়েছি। তুমি ইচ্ছা করলে এই প্রজেক্টে ‘redux’ এর লাইব্রেরীটা ইম্পোর্ট করে আমাদের মেইন index.js ফাইলটাতে ‘./my-redux’ এর পরিবর্তে ‘redux’ ইম্পোর্ট করে দেখতে পারো। আর কোনো ফাইলে কিছু চেঞ্জ করতে হবে না। দেখবা পুরো একই রকম রেজাল্ট পাবা। তোমার যদি বিশ্বাস করতে কষ্ট হয় যে Redux এভাবেই কাজ করে কিনা তাহলে Redux এর মূল সোর্স কোডেও দেখতে পারো এখানে গিয়ে। এখানে আরো অনেক কিছুই আছে, আমরা আমাদের কোডে একেবারে মূল জিনিসটা ইমপ্লিমেন্ট করেছি। এজন্য হুবহু একই হবে না ঠিকই কিন্তু তুমি খেয়াল করলে দেখবা যে ব্যাসিক ব্যাপারটা আমাদের কোডের মতই।

এই ছবিটা Redux এর ফ্লো বোঝার জন্য ভালো। আমাদের UI তে কোনো বাটন ক্লিক বা ইভেন্টে আমরা Action dispatch করবো, সেটা Reducer ফাংশনের উপর বেইজ করে হ্যান্ডেল হবে, তাঁর কারণে State চেইঞ্জ হবে আর UI আগে থেকে subscribe করে রাখবে Store এর সাথে, যার কারণে State চেইঞ্জ এর কারণে UI সেই আপডেট পেয়ে যাবে। এটাই হচ্ছে মূল ফ্লো।
- হুম, ভাই। এখন কিছুটা বুঝতে পারতেছি মনে হইতেছে। কিন্তু আরো কিছু টপিকস আছে না Redux এর, ঐ যে Action creators, enhancer আরো কি কি সব।
- হবে হবে, সব হবে।খালি একটা আইসক্রিম দিয়ে এতকিছু বুঝে ফেলতে চাইলে হবে?ঐটার জন্য KFC তে খাওয়ানোর ডিলে যাইতে হবে। আজকে আপাতত এইটুকুই। বকবক করতে করতে গলা শুকায় গেছে। চলো আইসক্রিম খাওয়াবা।
- ঠিক আছে, চলেন ভাই।

বিঃ দ্রঃ উপরের ঘটনার প্রেক্ষাপট সম্পূর্ণ কাল্পনিক। এর সাথে বাস্তব, অবাস্তব বা পরাবাস্তব কোনো ঘটনার মিল পাওয়া গেলে তা নিতান্তই কাকতালীয়।