Redux-এ ডেটা ফ্লো একটি একমুখী প্রক্রিয়া। এর মানে হল যে, ডেটা অ্যাপ্লিকেশনের মধ্যে কেবল এক ধরনের দিক দিয়ে প্রবাহিত হয় এবং কোনো অপ্রত্যাশিত পরিবর্তন বা ডেটা ম্যানিপুলেশন হয় না। এটি অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টকে সহজ, পূর্বানুমানযোগ্য এবং ডিবাগযোগ্য করে তোলে। Redux-এ ডেটা ফ্লো তিনটি প্রধান উপাদান থেকে গঠিত: Actions, Reducers, এবং Store। এই উপাদানগুলি একসাথে কাজ করে, অ্যাপ্লিকেশনের স্টেট পরিবর্তন এবং প্রবাহ পরিচালনা করতে।
Redux Data Flow এর প্রধান ধাপ
Redux-এ ডেটা ফ্লো একটি নির্দিষ্ট সিকোয়েন্সে চলে, যা সুনির্দিষ্টভাবে ডেটা পরিবর্তন এবং স্টেট আপডেট করে। এর ধাপগুলো হলো:
১. Action (অ্যাকশন)
Redux-এ Action হল একটি প্লেইন অবজেক্ট যা একটি নির্দিষ্ট type ধারণ করে এবং প্রায়ই অতিরিক্ত ডেটা (payload) থাকে, যা স্টেট পরিবর্তন করার জন্য প্রয়োজনীয়। অ্যাকশন কেবল রিডিউসারকে জানায় যে কী পরিবর্তন করতে হবে, কিন্তু এটি নিজে স্টেট পরিবর্তন করে না।
Action Example:
const addTodoAction = {
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
};
এই অ্যাকশনটি ADD_TODO একশন টাইপ ধারণ করে এবং একটি নতুন টুডু আইটেম যোগ করার জন্য প্রয়োজনীয় তথ্য payload হিসাবে পাঠাচ্ছে।
২. Dispatch (ডিসপ্যাচ)
অ্যাকশনটি স্টোরে পাঠাতে dispatch ফাংশন ব্যবহার করা হয়। এটি অ্যাপ্লিকেশন থেকে অ্যাকশন স্টোরে পাঠানোর প্রক্রিয়া। একশন ডিসপ্যাচ করার মাধ্যমে, স্টোর রিডিউসারকে জানায় যে স্টেট পরিবর্তন করতে হবে।
Dispatch Example:
store.dispatch(addTodoAction);
এখানে dispatch() ফাংশন অ্যাকশনটি স্টোরে পাঠাচ্ছে, যা স্টোরে রিডিউসারকে ট্রিগার করবে।
৩. Reducer (রিডিউসার)
Reducer হল একটি ফাংশন যা একটি অ্যাকশন গ্রহণ করে এবং স্টেটের একটি নতুন কপি তৈরি করে। রিডিউসার কখনও সরাসরি স্টেট পরিবর্তন করে না, বরং এটি পূর্ববর্তী স্টেট এবং অ্যাকশন ব্যবহার করে একটি নতুন স্টেট রিটার্ন করে।
Reducer Example:
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}
এখানে todosReducer স্টেটের একটি নতুন কপি তৈরি করে যখন একটি ADD_TODO অ্যাকশন আসে। স্টেটের পুরানো কপি অপরিবর্তিত থাকে, এবং একটি নতুন কপি তৈরি হয় যাতে নতুন টুডু আইটেম যুক্ত করা হয়।
৪. Store (স্টোর)
Store হল Redux-এ স্টেট ধারণ করার স্থান। এটি সমস্ত অ্যাপ্লিকেশনের স্টেট একক স্থানে সংরক্ষণ করে এবং রিডিউসার ব্যবহার করে সেই স্টেট আপডেট করে। স্টোর অ্যাকশন ও রিডিউসারের মাধ্যমে স্টেট পরিবর্তন করার জন্য একমাত্র জায়গা।
Store Example:
const store = createStore(todosReducer);
এখানে, createStore ফাংশনটি রিডিউসার todosReducer কে নিয়ে স্টোর তৈরি করে।
৫. View (ভিউ)
Redux-এ স্টোরের স্টেট পরিবর্তিত হলে, স্টেটের নতুন কপি থেকে UI (ভিউ) আপডেট করা হয়। UI রেন্ডার করার জন্য সাধারণত React বা অন্য কোনো লাইব্রেরি ব্যবহার করা হয়, যা স্টোরের স্টেট পরিবর্তনগুলোর প্রতি সাবস্ক্রাইব করে এবং সেই অনুযায়ী কম্পোনেন্ট রেন্ডার করে।
Redux Data Flow এর প্রক্রিয়া
Redux-এ ডেটা ফ্লো নিচের মতো একদম সোজা ও একমুখী:
- User Interaction / Event: ইউজার কোনো ইন্টারঅ্যাকশন বা ইভেন্ট ঘটায় (যেমন, টুডু আইটেম যোগ করা, বাটনে ক্লিক করা)।
- Action Dispatch: ইভেন্ট বা ইউজার ইন্টারঅ্যাকশনটি একটি অ্যাকশন তৈরি করে এবং সেই অ্যাকশনটি
store.dispatch()এর মাধ্যমে স্টোরে পাঠানো হয়। - Reducer: স্টোর অ্যাকশনটি গ্রহণ করে রিডিউসারে পাঠায়। রিডিউসার অ্যাকশন অনুযায়ী স্টেট পরিবর্তন করে একটি নতুন স্টেট রিটার্ন করে।
- State Update: নতুন স্টেটটি স্টোরে সঞ্চিত হয় এবং UI (ভিউ) রেন্ডার হয় নতুন স্টেটের সাথে।
- View Update: কম্পোনেন্টগুলি নতুন স্টেটের ভিত্তিতে UI আপডেট করে।
Redux Data Flow এর Diagram
User Event → Action → Dispatch → Reducer → Store → View Update
এটি Redux-এ ডেটা ফ্লোর সাধারণ প্রক্রিয়া, যা একমুখী ডেটা প্রবাহ নিশ্চিত করে এবং অ্যাপ্লিকেশনের স্টেট পরিবর্তনকে পূর্বানুমানযোগ্য এবং সহজে ডিবাগযোগ্য করে তোলে।
সারাংশ
Redux-এ ডেটা ফ্লো একটি একমুখী প্রক্রিয়া, যেখানে অ্যাকশন স্টোরে পাঠানো হয়, রিডিউসার সেই অ্যাকশন অনুযায়ী স্টেট পরিবর্তন করে, এবং নতুন স্টেটটি স্টোরে সঞ্চিত হয়। এটি UI (ভিউ) আপডেটের মাধ্যমে ব্যবহারকারীর কাছে পরিবর্তন প্রতিফলিত করে। Redux এর এই ডেটা ফ্লো অ্যাপ্লিকেশনটি সহজ, পূর্বানুমানযোগ্য, এবং ডিবাগযোগ্য রাখতে সাহায্য করে।
Read more
