Actions রিডাক্সের একটি মৌলিক উপাদান, যা স্টেট পরিবর্তনের উদ্দেশ্য জানাতে ব্যবহৃত হয়। Redux-এ, স্টেট পরিবর্তন করার জন্য একশন (Action) গুলি রিডিউসার (Reducer)-এর মাধ্যমে একটি নতুন স্টেট তৈরি করতে সাহায্য করে। অ্যাকশনগুলি শুধু স্টেট পরিবর্তন করার সংকেত দেয়, তবে সরাসরি স্টেট পরিবর্তন করে না।
এটা বোঝার জন্য, একশনগুলোকে সহজভাবে বলতে গেলে, অ্যাপ্লিকেশনের মধ্যে কোনো কিছু ঘটছে বা কোনো কাজ হচ্ছে, সেটা জানানোর মাধ্যম হিসেবে ভাবা যেতে পারে। Redux-এ অ্যাকশন পাঠানোর মাধ্যমে আমরা রিডিউসারকে জানাতে পারি, স্টেটকে কিভাবে আপডেট করতে হবে।
Actions কী?
Action হল একটি সাধারণ JavaScript অবজেক্ট, যা কমপক্ষে একটি type প্রপার্টি ধারণ করে। type ফিল্ডটি একটি স্ট্রিং আকারে থাকে এবং সেটি রিডিউসারকে জানায় যে, একশনটি কোন ধরনের কাজ করবে। বেশিরভাগ একশনেই একটি payload ফিল্ড থাকে, যা স্টেট পরিবর্তন করার জন্য প্রয়োজনীয় অতিরিক্ত তথ্য ধারণ করে।
উদাহরণ:
const addTodoAction = {
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
};
এখানে:
- type:
'ADD_TODO'- একশনের ধরন বা উদ্দেশ্য, যা রিডিউসারকে জানায়, নতুন টুডু আইটেম যোগ করতে হবে। - payload:
{ id: 1, text: 'Learn Redux' }- অতিরিক্ত তথ্য বা ডেটা যা নতুন টুডু আইটেমটি তৈরি করতে প্রয়োজন।
Actions কেন ব্যবহার করা হয়?
Redux-এ Actions ব্যবহারের মূল উদ্দেশ্য হলো স্টেট পরিবর্তনকে পূর্বানুমানযোগ্য এবং স্কেলেবল করা। কিছু কারণ নিচে উল্লেখ করা হলো:
১. স্টেট পরিবর্তন সেন্ট্রালাইজড করা
Redux-এ অ্যাকশন ব্যবহার করার মাধ্যমে স্টেট পরিবর্তন একটি সেন্ট্রালাইজড পদ্ধতিতে পরিচালিত হয়। একশনগুলো রিডিউসারের মাধ্যমে স্টেট পরিবর্তনকে নিয়ন্ত্রণ করে এবং এটি স্টোরের মধ্যে সঞ্চিত থাকে। ফলে, এক জায়গায় সমস্ত স্টেট পরিবর্তন এবং তার ইতিহাস রাখা সম্ভব হয়।
- ফায়দা: স্টেট পরিবর্তনের শৃঙ্খলা এবং পর্যবেক্ষণ সহজ হয়। একই সময় একাধিক কম্পোনেন্টের স্টেট পরিবর্তন শেয়ার করা সম্ভব হয়।
২. স্টেট পরিবর্তন কন্ট্রোল করা
একশনগুলি কেবল রিডিউসারকে জানায় যে স্টেট পরিবর্তন করতে হবে, কিন্তু তারা সরাসরি স্টেট পরিবর্তন করে না। রিডিউসার সেই একশন গ্রহণ করে নতুন স্টেট তৈরি করে, যা পূর্ববর্তী স্টেটের উপর ভিত্তি করে। একশন এর মাধ্যমে স্টেট পরিবর্তন কেবলমাত্র অনুমোদিত রিডিউসার দ্বারা হয়।
- ফায়দা: এটি অ্যাপ্লিকেশনকে স্টেট পরিবর্তন নিয়ে নিরাপদ রাখে এবং অপ্রত্যাশিত বা ভুল পরিবর্তন থেকে রক্ষা করে।
৩. ডিবাগিং সহজ করা
Redux অ্যাকশন লগ এবং স্টেট ট্র্যাক করার সুবিধা প্রদান করে। যেহেতু অ্যাকশনগুলি রিডিউসারকে নির্দিষ্ট একশনের সংকেত দেয়, তাই প্রতিটি একশনের মাধ্যমে আপনি জানাতে পারেন কেন একটি নির্দিষ্ট পরিবর্তন ঘটেছে। আপনি সহজে একটি একশন লগ করতে পারেন এবং পরবর্তী সময়ে সমস্যার সঠিক কারণ খুঁজে পেতে পারেন।
- ফায়দা: অ্যাপ্লিকেশন ডিবাগিং আরও সহজ এবং কার্যকরী হয়।
৪. পূর্বানুমানযোগ্য আচরণ নিশ্চিত করা
Redux-এ একশন পাঠানো একটি পূর্বানুমানযোগ্য ফ্লো তৈরি করে। একশন ডিসপ্যাচ করা থেকে শুরু করে রিডিউসার ও স্টোর পর্যন্ত, সব কিছুই পূর্বানুমানযোগ্য এবং ধারাবাহিক থাকে। এটি অ্যাপ্লিকেশনটি স্কেল করলে, আরও অনেক উন্নত মানের আচরণ প্রদান করতে সাহায্য করে।
- ফায়দা: বড় এবং জটিল অ্যাপ্লিকেশনেও কোড সহজে রক্ষণাবেক্ষণযোগ্য এবং সম্প্রসারণযোগ্য হয়।
৫. একশন ক্রিয়েটর ব্যবহার করা
একশন গুলি সাধারণত Action Creators নামক ফাংশনের মাধ্যমে তৈরি করা হয়। Action Creators একশন অবজেক্ট তৈরি করে এবং যেকোনো লজিক বা প্রক্রিয়া (যেমন, ডেটা ফেচ করা) এই ফাংশনের মধ্যে রাখা হয়। এটি কোডকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে তোলে।
- ফায়দা: একশন ডেফিনিশন পরিষ্কার এবং কোড পুনঃব্যবহারযোগ্য হয়, ফলে অ্যাপ্লিকেশনটি আরও মেইনটেনেবল হয়ে ওঠে।
উদাহরণ:
// Action Creator
function addTodo(text) {
return {
type: 'ADD_TODO',
payload: {
id: Date.now(),
text: text
}
};
}
// Dispatching action using action creator
store.dispatch(addTodo('Learn Redux'));
৬. অ্যাসিনক্রোনাস কাজের জন্য উপযোগিতা
Redux-এ Redux Thunk বা Redux Saga মiddleware ব্যবহার করে অ্যাসিনক্রোনাস একশন হ্যান্ডলিং করা যায়। এটি অ্যাসিনক্রোনাস কাজ (যেমন API কল বা টাইমার) করার জন্য ব্যবহৃত হয়, যেখানে একশন ডিপেন্ডেন্ট হয়ে থাকে ফলাফল বা কাজের উপর।
- ফায়দা: অ্যাসিনক্রোনাস কাজ পরিচালনা করা সহজ হয় এবং একশনগুলির মাধ্যমে সেগুলি নিয়ন্ত্রণ করা সম্ভব হয়।
উদাহরণ (Redux Thunk):
// Action Creator with Thunk for asynchronous action
function fetchData() {
return function(dispatch) {
dispatch({ type: 'FETCH_DATA_START' });
fetch('/api/data')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
});
};
}
এখানে fetchData ফাংশনটি একটি অ্যাসিনক্রোনাস কাজের জন্য থাঙ্ক ব্যবহৃত হয়েছে।
সারাংশ
Actions Redux-এ একটি গুরুত্বপূর্ণ উপাদান, যা স্টেট পরিবর্তনের উদ্দেশ্য রিডিউসারকে জানাতে ব্যবহৃত হয়। একশন শুধুমাত্র স্টেট পরিবর্তন করার সংকেত দেয়, সরাসরি স্টেট পরিবর্তন করে না। অ্যাকশন ব্যবহারের মাধ্যমে, অ্যাপ্লিকেশনের স্টেট পরিবর্তন পূর্বানুমানযোগ্য, স্কেলেবল, এবং সহজে ডিবাগযোগ্য হয়। Action Creators একশনগুলোকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে তোলে, এবং Redux Thunk বা Redux Saga ব্যবহার করে অ্যাসিনক্রোনাস কাজ পরিচালনা করা যায়।
