Actions Redux-এ এমন অবজেক্ট যা স্টেট পরিবর্তনের ইচ্ছা বা প্রয়োজনীয়তা জানাতে ব্যবহৃত হয়। একশনগুলি স্টেট পরিবর্তন করার উদ্দেশ্যে Reducers-কে সংকেত দেয়। Redux স্টেট ম্যানেজমেন্ট প্যাটার্নে, অ্যাকশন হল একমাত্র মাধ্যম যা স্টেট পরিবর্তন ঘটায়। তবে, একশনগুলি সরাসরি স্টেট পরিবর্তন করে না; বরং তারা রিডিউসার ফাংশনকে নির্দেশ দেয় কিভাবে স্টেট পরিবর্তন করতে হবে।
Action কী?
Action হল একটি সাধারণ JavaScript অবজেক্ট, যেটির মধ্যে কমপক্ষে একটি type ফিল্ড থাকে, যা সেই একশনের উদ্দেশ্য বা কার্যকলাপ নির্ধারণ করে। একশনটি কখনোই নিজে স্টেট পরিবর্তন করে না, বরং এটি রিডিউসারকে জানায় কিভাবে স্টেট পরিবর্তন হবে।
একটি একশন সাধারণত দুটি অংশে বিভক্ত থাকে:
- Type: একশনটির ধরন বা কার্যকলাপ। এটি একটি স্ট্রিং হিসেবে থাকে এবং রিডিউসারের মধ্যে একটি
switchস্টেটমেন্টে ব্যবহৃত হয়। - Payload (Optional): এটি ঐকিকভাবে কিছু ডেটা, যা একশনটি সম্পাদন করতে প্রয়োজন। উদাহরণস্বরূপ, যদি একশনটি কোনো নতুন টুডু আইটেম যোগ করার জন্য হয়, তবে সেই টুডু আইটেমের তথ্য
payloadহিসেবে থাকবে।
Action এর উদাহরণ
const addTodoAction = {
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
};
এখানে:
- type:
'ADD_TODO'- এটি একশনের ধরন, যা রিডিউসারকে জানায় যে, টুডু আইটেম যোগ করতে হবে। - payload:
{ id: 1, text: 'Learn Redux' }- এটি সেই তথ্য, যা টুডু আইটেমের জন্য প্রয়োজনীয়।
Action এর কাজ
Redux অ্যাপ্লিকেশনে স্টেট পরিবর্তন করতে হলে প্রথমে একটি একশন ডিসপ্যাচ করা হয়। একশনটি সাধারণত অ্যাপ্লিকেশনের যেকোনো জায়গা থেকে ডিসপ্যাচ করা হতে পারে, যেমন UI ইন্টারঅ্যাকশন, API কল বা কোনো অ্যাসিনক্রোনাস কাজের মাধ্যমে।
- একশন ডিসপ্যাচ করা: অ্যাপ্লিকেশনের যে কোনও অংশ থেকে
store.dispatch(action)ফাংশন ব্যবহার করে একশন পাঠানো হয়। একশন পাঠানোর মাধ্যমে, স্টোর রিডিউসারকে জানায় যে, স্টেট পরিবর্তন করতে হবে। - রিডিউসার: একশনটি রিডিউসার ফাংশনে পৌঁছায়। রিডিউসার বর্তমান স্টেট এবং অ্যাকশন গ্রহণ করে একটি নতুন স্টেট তৈরি করে।
- স্টোর: স্টোর নতুন স্টেট ধারণ করে এবং যেকোনো কম্পোনেন্ট বা অংশকে স্টেটের পরিবর্তন সম্পর্কে জানায়।
Action Creator কী?
Action Creator হল একটি ফাংশন যা একটি একশন অবজেক্ট তৈরি করে। এটি কোডের পুনঃব্যবহারযোগ্যতা এবং কোডের পরিষ্কারতা বাড়ায়। সাধারণত, একশনগুলি সরাসরি স্টোরে ডিসপ্যাচ করার পরিবর্তে, action creators দিয়ে ডিসপ্যাচ করা হয়।
Action Creator এর উদাহরণ:
// 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'));
এখানে, addTodo একটি অ্যাকশন ক্রিয়েটর যা একটি নতুন টুডু আইটেমের জন্য একটি অ্যাকশন অবজেক্ট তৈরি করে। তারপর সেই অ্যাকশন store.dispatch() দিয়ে স্টোরে পাঠানো হয়।
অ্যাকশন (Action) এর Types
Redux অ্যাপ্লিকেশনগুলিতে বিভিন্ন ধরনের একশন ব্যবহৃত হতে পারে। সাধারণত, একশনগুলিকে একটি সেন্ট্রালাইজড স্থানে (যেমন, একটি actionTypes.js ফাইল) ডিফাইন করা হয়, যা কনস্ট্যান্ট হিসেবে ব্যবহৃত হয়। এর মাধ্যমে টেক্সট স্ট্রিংগুলির ভুল এড়ানো যায় এবং কোডকে আরও মেইনটেনেবল করা যায়।
উদাহরণ:
// actionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
এবং তারপর, এই একশন টাইপগুলি অ্যাকশন অবজেক্টে ব্যবহার করা হয়:
import { ADD_TODO } from './actionTypes';
const addTodo = (text) => ({
type: ADD_TODO,
payload: { text }
});
এভাবে একশন টাইপগুলো একক স্থানে সংরক্ষণ করলে কোডের নিরাপত্তা এবং রিডেবিলিটি বাড়ে।
অ্যাকশন এবং রিডিউসার মধ্যে সম্পর্ক
Redux-এ একশন এবং রিডিউসারের মধ্যে সম্পর্ক অত্যন্ত গুরুত্বপূর্ণ। একশন শুধুমাত্র স্টেট পরিবর্তনের সংকেত দেয়, কিন্তু রিডিউসার সেই একশনের ভিত্তিতে স্টেট আপডেট করে।
একশন এবং রিডিউসারের উদাহরণ:
// Action
const addTodoAction = {
type: 'ADD_TODO',
payload: { id: 1, text: 'Learn Redux' }
};
// Reducer
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}
// Dispatching action
store.dispatch(addTodoAction);
এখানে:
- একশন (Action) স্টোরকে জানায় যে একটি নতুন টুডু আইটেম যোগ করতে হবে।
- রিডিউসার (Reducer) সেই একশন গ্রহণ করে নতুন স্টেট তৈরি করে।
অ্যাসিনক্রোনাস অ্যাকশন (Asynchronous Actions)
Redux তে সাধারণত সিনক্রোনাস অ্যাকশন ব্যবহৃত হয়, কিন্তু কখনও কখনও অ্যাসিনক্রোনাস কাজ করতে হয় (যেমন API কল)। Redux এর সাধারণ অ্যাকশনগুলি সিনক্রোনাস হলেও, Redux Thunk বা Redux Saga এর মতো মiddleware ব্যবহার করে অ্যাসিনক্রোনাস একশন হ্যান্ডেল করা যায়।
Redux Thunk এর উদাহরণ:
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 একটি অ্যাসিনক্রোনাস একশন ক্রিয়েটর, যা প্রথমে একটি START একশন ডিসপ্যাচ করে, তারপর API থেকে ডেটা ফেচ করে এবং সফল হলে একটি SUCCESS একশন ডিসপ্যাচ করে।
সারাংশ
Actions Redux-এর একটি গুরুত্বপূর্ণ অংশ, যা স্টেট পরিবর্তনের সংকেত প্রদান করে। এটি একটি সাধারণ জাভাস্ক্রিপ্ট অবজেক্ট, যেটির মধ্যে type এবং কখনো payload থাকে। Action Creator হল একটি ফাংশন যা এই অ্যাকশন অবজেক্ট তৈরি করে। অ্যাকশন কখনোই সরাসরি স্টেট পরিবর্তন করে না, বরং এটি রিডিউসারকে নির্দেশ দেয় কিভাবে স্টেট পরিবর্তন করতে হবে। Redux-এ অ্যাসিনক্রোনাস কাজের জন্য Redux Thunk বা Redux Saga এর মতো middleware ব্যবহৃত হতে পারে।
