সহজ ভাষায় Redux কীভাবে কাজ করে
React কম্পোনেন্টগুলোর মধ্যে ডেটা পাস করা প্রায়শই একটি 'গেম অফ টেলিফোন'-এর মতো মনে হয়। আপনি ডেটা একটি প্যারেন্ট থেকে চাইল্ড এবং তারপর গ্র্যান্ডচাইল্ড-এ পাস করেন। অ্যাপ বড় হওয়ার সাথে সাথে এটি বেশ জটিল হয়ে পড়ে।
Redux এই সমস্যার সমাধান করে। এটি একটি 'single source of truth' তৈরি করে। ছড়িয়ে ছিটিয়ে থাকা ডেটার পরিবর্তে, সবকিছু একটি কেন্দ্রীয় ভল্টে (central vault) থাকে।
Redux বোঝার জন্য একটি কফি শপের কথা চিন্তা করুন।
The Store (ভল্ট) এটি হলো দোকানের হিসাবের খাতা বা লেজার। এটি বিনের সংখ্যা, অর্ডার এবং কর্মীদের তালিকা ট্র্যাক করে।
The Action (অর্ডার)
একজন গ্রাহক কাউন্টার থেকে সরাসরি একটি লাতে (latte) নিয়ে যান না। তারা একটি অর্ডার দেন। একটি action হলো একটি সাধারণ অবজেক্ট যা কী ঘটেছে তা বর্ণনা করে।
Example: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (বারিস্টা) বারিস্টাই একমাত্র ব্যক্তি যিনি হিসাবের খাতা আপডেট করেন। তারা বর্তমান স্টেট (state) এবং নতুন অর্ডারটি গ্রহণ করেন। তারপর তারা লেজারের একটি নতুন সংস্করণ তৈরি করেন।
The Dispatch (ক্যাশিয়ার) ক্যাশিয়ার আপনার অর্ডারটি নেন এবং সেটি বারিস্টাকে দেন। Dispatch হলো সেই ফাংশন যা আপনার action-টিকে স্টোরে পাঠিয়ে দেয়।
কেন Redux ব্যবহার করবেন?
আপনার অ্যাপ যখন ইউজার প্রোফাইল বা শপিং কার্ট অন্তর্ভুক্ত করার মাধ্যমে বড় হতে থাকে, তখন একটি কেন্দ্রীয় স্টোর ডিবাগিং সহজ করে তোলে। ডেটা কখন এবং কেন পরিবর্তিত হয়েছে তা দেখার জন্য আপনি আপনার action history দেখতে পারেন। এটি আপনার ওয়েবসাইটের জন্য একটি ফ্লাইট রেকর্ডারের মতো কাজ করে।
সারসংক্ষেপ:
• Action: একটি পরিবর্তন বর্ণনা করার নোট। • Reducer: সেই লজিক যা পরিবর্তনটি সম্পন্ন করে। • Dispatch: সেই ট্রিগার যা action-টিকে লজিকের কাছে পাঠিয়ে দেয়।
Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp