সহজ বাংলায় React Hooks সিরিজ। পর্ব ৪ – useReducer

আমরা আগের পর্বগুলোতে useState, useEffect, useRef নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useReducer নিয়ে আলোচনা করবো ইনশাআল্লাহ। তাহলে শুরু করা যাক।

প্রথমে আসা যাক useReducer hook কি? useReducer hook হচ্ছে আমাদের useState hookএর আরেকটি অলটারনেটিভ এবং এটি দিয়েও আমরা আমাদের ইন্টারনাল state কে আপডেট করতে পারি। useState এর মত useReducer এর মাধ্যমে state আপডেট করলেও আমাদের React Component re-render হয়ে আমাদেরকে নতুন state দেয়।

আমাদের মনে এখন স্বভাবতই প্রশ্ন আসে, useReducer যদি useState এর মতই একই কাজ করে তাহলে এটার দরকার কি আমাদের? ভালো প্রশ্ন। মূলত আমাদের ইন্টারনাল ষ্টেটের উপর ডিপেন্ড করে যে আমরা কোনটা ব্যাবহার করবো। বেশিরভাগ ক্ষেত্রে আমাদের useState দিয়েই কাজ চলে যায়। কিন্তু যদি

• আমাদের ষ্টেট কমপ্লেক্স হয়ে যায়,
• ষ্টেটের যদি মাল্টিপেল সাবভেলু থাকে
• এবং যদি একটি ষ্টেট আরেকটি ষ্টেটের উপর নির্ভর করে সেক্ষেত্রে useReducer ব্যাবহার করা প্রেফারেবেল।

নিচে useReducer এর একটা ছোট উদাহরণ দেখানো হল। যেহেতু এই কাজের জন্যে useReducer এর দরকার নেই কিন্তু useReducer বুঝানোর জন্যে এখানে দেয়া হল। এই ছবিটি ভালমত লক্ষ্য করি আমরা। এখানে একসাথে অনেক কিছু হচ্ছে।

১। useReducer ফাংশন ২টি আর্গুমেন্ট নেয় আমরা দেখতে পারছি। প্রথমটি হচ্ছে reducer ফাংশন এবং দ্বিতীয়টি হচ্ছে আমাদের state এর ইনিশিয়াল value। আমাদের count এর ক্ষেত্রে সেটি হচ্ছে 0.

২। usrReducer থেকে আমরা 2টি value return পাই, প্রথমটি হল আমাদের ষ্টেট এবং দ্বিতীয়টি হল dispatch. এই dispatch এর কাজ আমরা reducer ফাংশনে দেখতে পারব। তাহলে আমরা আশা করি উপড়ের সিনট্যাক্স থেকে বুঝতে পারছি।

এখন আমরা মেইন পার্টে যাব যে, কিভাবে আমরা আমাদের count state কে আপডেট করতে পারি। useReducer এর মাধ্যমে যদি আমরা আমাদের ষ্টেট value কে আপডেট করতে যাই সেক্ষেত্রে আমাদের reducer ফাংশনটি ব্যাবহার করা লাগবে। আমরা ধরে নেই আমাদের উদাহরণে ২ টি বাটন আছে, একটি বাটন আমাদের count এর value ১ increment করে এবং আরেকটি বাটন আমাদের count এর value ১ decrement করে দেয়। তাহলে আমরা আগে কোড দেখে নেই যে কিভাবে আমরা এই increment এবং decrement করতে পারি।

উপরে আমরা দেখতে পারছি ২ টি বাটন, প্রথম বাটনটি ক্লিক করলে আমরা onIncrement ফাংশনটি call করছি এবং দ্বিতীয় বাটনটি ক্লিক করলে আমরা onDecrement call করছি। এখন onIncrement এর ভিতরে যদি আমরা যাই তাহলে দেখতে পারব আমরা একটি object কে dispatch করছি যেটার ভিতরে আমরা একটি type: “increment” এবং একটি payload: 1 attach করে দিচ্ছি। এখন প্রশ্ন হচ্ছে এই যে dispatch করলাম, এটা কোথায় যাচ্ছে। আমরা আবার ফিরে যাই আমাদের reducer ফাংশন এ। আমরা যেটাই dispatch করছি সেটাই আমাদের reducer ফাংশন এ second আর্গুমেন্ট action এ পাচ্ছি আমরা। নিচের ভিডিও টি দেখি আমরা

সুতরাং দেখা যাচ্ছে আমরা dispatch এ যা পাঠাই সেটা reducer এর action এ যায়, আমরা খেয়াল করেছি dispatch এ আমরা একটি object পাঠিয়েছিলাম যেটার ভিতরে আমরা একটা string দিয়ে দিছিলাম, মূলত এটি হচ্ছে আমাদের unique order/command যেটা আমরা আমাদের reducer এ পাঠাই এবং reducer এই command কে পেয়ে state আপডেট করে থাকে। এই কমান্ডের পাশাপাশি আমরা payload ও পাঠাতে পারি, payload যেকোনো value হতে পারে। এখন কথা হচ্ছে আমাদেরকে কি সবসময় এরকম নামেই পাঠাতে হবে নাহলে কি কাজ করবে না? না আপনি যেকোনো নামে পাঠাতে পারেন কিন্তু community practice টা এরকম। সুতরাং সেটা follow করাই উত্তম।

তাহলে আমরা দেখলাম আমাদের reducer action পাচ্ছে, আমাদের নেক্সট কাজ হচ্ছে তাহলে এই action পাওয়ার পরে action অনুযায়ী আমাদের ষ্টেটকে আপডেট করা, তাহলে আমরা সেই code টি প্রথমে লিখে ফেলি.

এখানে আমরা একটি switch statement ব্যাবহার করেছি, কেউ চাইলে if..else ও ব্যাবহার করতে পারে। উপরের কোডে থেকে আশা করি কি হচ্ছে সেটা ক্লিয়ার। যখন আমাদের action.type -> 'increment‘ তখন আমরা আমাদের current state এ ১ অ্যাড করে দিচ্ছি ঠিক decrement এ আমরা 1 minus করে দিচ্ছি। আমরা reducer function এর প্রথম আর্গুমেন্ট state এ সবসময় আমাদের current state value পাব। আমরা এখন যে value রিটার্ন করবো আমাদের reducer ফাংশন থেকে সেটাই হবে আমাদের ষ্টেটের আপডেটেড value

উপড়ের ডেমোতে পুরো জিনিসটি একসাথে দেয়া আছে। আশা করা যাচ্ছে আমরা useReducer এর ব্যাবহার সম্পর্কে একটি আইডিয়া পেলাম। যেহেতুও count এর এই উদাহরণে আমাদের useReducer hook এর কোন দরকার নেই, কিন্তু সহজভাবে বুঝার সুবিধার্থে এখানে এটি দেওয়া হল। ইনশাল্লাহ কমপ্লেক্স কোন উদাহরণ নিয়ে আরেকটি ব্লগ পোস্ট করা যাবে।

সিরিজের পরের পর্বগুলো ইনশাল্লাহ –

• useContext
• useMemo
• useCallback
• custom hooks