Redux অ্যাপ্লিকেশনের কার্যক্রম নিয়ে আলোচনা

গত কয়েকটি পাঠে আমরা Redux অ্যাপ্লিকেশন কাজ করার জন্য প্রয়োজনীয় সমস্ত উপাদান বাস্তবায়ন করেছি। আসুন সারসংক্ষেপ করি এবং আমাদের পণ্য নিয়ে অ্যাপ্লিকেশনের মূল কাজের ধাপগুলো সংক্ষেপে পর্যালোচনা করি।

প্রথম চালুতে, আমাদের অ্যাপ্লিকেশন useSelector ব্যবহার করে store থেকে দুটি পণ্যের তালিকা পুনরুদ্ধার করে এবং সেগুলো স্ক্রিনে প্রদর্শন করে। স্ক্রিনে একটি ফর্মও প্রদর্শিত হয়, যেখানে আমরা একটি নতুন পণ্যের ডেটা প্রবেশ করাতে পারি। যখন ব্যবহারকারী সংরক্ষণ বাটনে ক্লিক করেন, তখন বাটনের হ্যান্ডলার productAdded action প্রেরণ করে, যাতে নতুন পণ্যের ডেটা থাকে যা ব্যবহারকারী ফর্মে প্রবেশ করিয়েছেন। পণ্য স্লাইসের জন্য আমরা যে রিডিউসার ফাংশন লিখেছি, এটি সেই action গ্রহণ করে এবং পণ্যের অ্যারেতে নতুন পণ্যের অবজেক্ট যোগ করে। Store কম্পোনেন্টগুলোকে জানায় যে সংরক্ষিত state ডেটা পরিবর্তন করা হয়েছে। আমাদের ProductsList কম্পোনেন্ট পরিবর্তিত অ্যারে পড়ে, রেন্ডারিং কল করে, যার ফলে আমরা পণ্যের তালিকায় যোগ করা পণ্যটি দেখতে পাই।

এখন ব্রাউজারে Redux DevTools খুলি এবং অ্যাপ্লিকেশনে আরও একটি পণ্য যোগ করি, তারপর Log monitor ট্যাব দেখি, এখানে আমরা দেখতে পারি যে অ্যাপ্লিকেশন চালু করার সময় আমাদের state কী ছিল, এবং তারপর কীভাবে, সংরক্ষণ বাটনে ক্লিক করার পরে, actionটি উপস্থিত হয়েছে। আমরা এর payload বৈশিষ্ট্য এবং গ্লোবাল স্টেটের পরিবর্তনগুলো দেখতে পারি।

পরের অধ্যায়ে আমরা আমাদের Redux অ্যাপ্লিকেশনের ডেটা নিয়ে আরও গভীরভাবে কাজ করব।