Redux-এ রিডিউসার
গত পাঠে, আমরা ফাংশন ব্যবহার করে
createSlice পণ্যের জন্য একটি স্লাইস তৈরি করেছি
products এবং একটি রিডিউসার যা আপডেট করবে
স্টোরে সংরক্ষিত এই স্লাইস। আমি আবারও মনে করিয়ে দিচ্ছি,
যে Redux-এ state ডেটা পরিবর্তন করা হয়
রিডিউসার ব্যবহার করে।
মনে রাখতে হবে, রিডিউসারগুলির উপর আরোপিত হয়
একটি সীমাবদ্ধতা সিরিজ। রিডিউসার শুধুমাত্র বর্তমান state এবং
action অবজেক্টের মানের ভিত্তিতে state আপডেট করে,
তারপর সিদ্ধান্ত নেয় কিভাবে state পরিবর্তন করতে হবে
এবং তার নতুন মান রিটার্ন করে।
আমরা জানি, ডিফল্টরূপে JavaScript-এ অবজেক্ট এবং অ্যারে
mutable (পরিবর্তনযোগ্য)। এছাড়াও
আমরা জানি, সরাসরি state পরিবর্তন করা উচিত নয়,
সেক্ষেত্রে শুধুমাত্র কপি নিয়ে কাজ করতে হবে।
এই নিয়ম রিডিউসারকেও মেনে চলতে হবে।
কিন্তু ম্যানুয়ালি এমন লজিক লেখা হতে পারে
বেশ ক্লান্তিকর এবং জটিল কাজ, এবং
এখানে সাহায্য করে ফাংশন createSlice,
যা Immer লাইব্রেরি ব্যবহার করে
Immer,
আপনার 'mutable' কোডকে 'immutable' কোডে রূপান্তরিত করে।
এইভাবে, পাপ করা এবং জীবন সহজ করা
শুধুমাত্র তখনই সম্ভব যখন আপনি ফাংশন ব্যবহার করেন
createSlice বা createReducer।
রিডিউসারের সীমাবদ্ধতার মধ্যে আরও অন্তর্ভুক্ত অ্যাসিঙ্ক্রোনাস লজিক ব্যবহার করা, র্যান্ডম মান গণনা করা এবং অন্যান্য "side effects" সম্পাদন করা। এবং এখন, রিডিউসারের সাথে ঘনিষ্ঠভাবে পরিচিত হয়ে, আসুন আমাদের পণ্য অ্যাপ্লিকেশনে ফিরে যাই।
আমাদের অ্যাপ্লিকেশনে একটি store আছে যা
আমরা আগের পাঠে তৈরি করেছি, কিন্তু এখনও
এতে কিছুই নেই। আসুন আমাদের
ফাইল store.js খুলি এবং এতে কিছু
কোড যোগ করি। শুরুতে, এতে পণ্যের জন্য
reducer ফাংশনটি ইম্পোর্ট করি:
import productsReducer from '../parts/products/productsSlice'
এখন reducer হিসাবে আমরা
ইম্পোর্ট করা ফাংশনটি
productsReducer নির্দিষ্ট করতে পারি:
export default configureStore({
reducer: {
products: productsReducer
}
})
উপরের লাইন দ্বারা আমরা আমাদের store-কে বলছি,
যে এখন কোন action ঘটলে
state.products স্লাইসের জন্য সমস্ত ডেটা
productsReducer রিডিউসার দ্বারা আপডেট করা হবে।
এখন আপনি অ্যাপ্লিকেশনটি চালু করতে পারেন (লক্ষ্য করুন,
কনসোলে অবৈধ reducer সম্পর্কিত সতর্কতা অদৃশ্য হয়ে গেছে!),
ব্রাউজারে Redux DevTools খুলুন এবং এর ট্যাবগুলিতে ঘুরে দেখুন।
উদাহরণস্বরূপ, Inspector-এ State ট্যাবে ক্লিক করে
আমরা আমাদের দুটি পণ্য অবজেক্ট দেখতে পাচ্ছি,
যেগুলো অ্যাপ্লিকেশন প্রথম চালু হওয়ার সময়
state-এর প্রারম্ভিক মান হিসেবে প্রদর্শিত হয়েছিল। Log monitor ট্যাবে
আমরা দেখতে পাই গ্লোবাল state-এর কোন কোন স্লাইস আছে -
এটি products স্লাইস, যাতে দুটি অবজেক্ট রয়েছে।
এছাড়াও Chart ট্যাবেও একবার দেখুন।
আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন এবং
store.js ফাইলের কোড পরিবর্তন করুন,
যেমন পাঠে দেখানো হয়েছে।
আপনার অ্যাপ্লিকেশনটি ব্রাউজারে চালু করুন এবং Redux DevTools এক্সটেনশনের বিভিন্ন ট্যাবে ঘুরে দেখুন।
