Redux-এ সিলেক্টর এবং useSelector হুক

গত পাঠে আমরা স্টোরে পণ্যের ডেটা লিখেছি। সেগুলো স্টোর থেকে কীভাবে পাবো?

এটি করতে আমাদের একটি ফাংশন-সিলেক্টর লিখতে হবে। এই ফাংশনটি জানে কীভাবে স্টোরে সংরক্ষিত স্টেটের মান থেকে একটি নির্দিষ্ট অংশের তথ্য বের করতে হয় এবং অ্যাপ্লিকেশন বড় হওয়ার সময় পুনরাবৃত্ত কোড লেখা এড়াতে সাহায্য করে। এই ফাংশনটি ইনপুট হিসেবে state নেয় এবং আউটপুট হিসেবে প্রয়োজনীয় স্টেটের স্লাইস দেয়। উদাহরণস্বরূপ:

jsxconst selectValue = state => state.some.value

টিউটোরিয়ালের একদম শুরুতে উল্লেখ করা হয়েছিল যে store-এর একটি getState মেথড আছে। এবং আমরা সেটি সহজেই স্টেটের মান পেতে ব্যবহার করতে পারতাম:

jsxconst value = selectValue(store.getState())

সমস্যা হলো যে আমাদের React কম্পোনেন্টগুলি সরাসরি store-এ অ্যাক্সেস পেতে পারে না, কারণ কম্পোনেন্ট ফাইলে এটি ইম্পোর্ট করা নিষিদ্ধ। কিন্তু আমাদের React-Redux হুক useSelector ব্যবহার করে কম্পোনেন্টে ডেটা পাওয়ার সুযোগ আছে। তাছাড়া, এই হুকের সাথে আমাদের কম্পোনেন্টগুলি সর্বদা শুধুমাত্র প্রাসঙ্গিক ডেটাই পাবে:

jsxconst count = useSelector(selectValue)