Web Development Actions এবং Action Creators গাইড ও নোট

Actions এবং Action Creators Redux-এর অত্যন্ত গুরুত্বপূর্ণ উপাদান। Redux-এর স্টেট ম্যানেজমেন্টে একশনগুলো মূল ভূমিকা পালন করে, কারণ একশনগুলি অ্যাপ্লিকেশনের স্টেট পরিবর্তনের ইচ্ছা বা সংকেত দেয়। তবে, একশনগুলি সরাসরি স্টেট পরিবর্তন করে না, বরং সেগুলি রিডিউসার (Reducers) কে জানায় কিভাবে স্টেট পরিবর্তন করতে হবে। Action Creators হল সেই ফাংশন যা একশন তৈরি করতে সাহায্য করে।

Actions কী?

Actions হল Redux-এ ব্যবহৃত এমন জাভাস্ক্রিপ্ট অবজেক্ট যা স্টেট পরিবর্তন করার উদ্দেশ্য ঘোষণা করে। একটি একশন অবশ্যই একটি type ফিল্ড থাকতে হবে, যা সেই একশনের কার্যকলাপ বা ধরণ নির্ধারণ করে। একশনটি স্টেট পরিবর্তন করার জন্য রিডিউসারকে সংকেত পাঠায়।

একশনের গঠন

একটি একশন সাধারণত দুটি প্রধান উপাদান ধারণ করে:

1. type: এটি একটি স্ট্রিং, যা একশনের ধরণ নির্ধারণ করে। এটি রিডিউসারের switch স্টেটমেন্টে ব্যবহার করা হয়।
2. payload (Optional): এটি ঐচ্ছিক, এবং একশনটির সাথে প্রাসঙ্গিক কোনো ডেটা ধারণ করে, যেমন ব্যবহারকারীর ইনপুট বা API থেকে পাওয়া ডেটা।

উদাহরণ:

const addTodoAction = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux'
  }
};

এখানে:

• type: 'ADD_TODO' - এটি একশনের ধরণ যা রিডিউসারকে জানায় যে একটি টুডু আইটেম যোগ করতে হবে।
• payload: { id: 1, text: 'Learn Redux' } - এটি সেই ডেটা, যা টুডু আইটেমের বিস্তারিত প্রদান করে।

Action Creators কী?

Action Creators হল এমন ফাংশন যা একশন অবজেক্ট তৈরি করে। সাধারণত, একশনগুলি সরাসরি ডিসপ্যাচ করার পরিবর্তে, action creators ব্যবহার করা হয়। এটি কোডের পুনঃব্যবহারযোগ্যতা বাড়ায় এবং কোডকে পরিষ্কার ও মেইনটেনেবল করে।

Action creator একটি সাধারণ ফাংশন যা একশন অবজেক্ট রিটার্ন করে।

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 হল একটি action creator ফাংশন যা নতুন টুডু আইটেমের জন্য একটি একশন অবজেক্ট তৈরি করে।
• store.dispatch(addTodo('Learn Redux')) দিয়ে আমরা এই একশনটি ডিসপ্যাচ করি, যেটি স্টোরে পাঠানো হবে এবং স্টেট পরিবর্তন করবে।

Action Types এবং Constants

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-এ একশন এবং রিডিউসার অত্যন্ত ঘনিষ্ঠভাবে কাজ করে। একশনগুলি স্টোরের স্টেট পরিবর্তন করতে রিডিউসারকে সংকেত দেয়। একশনটি যেহেতু একটি অবজেক্ট, রিডিউসার সেই অবজেক্টের type প্রপার্টি অনুযায়ী স্টেট পরিবর্তন করে।

উদাহরণ:

// 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) হলো { type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' } } যা রিডিউসারকে জানাচ্ছে যে নতুন টুডু আইটেম যোগ করতে হবে।
• রিডিউসার (Reducer) ADD_TODO টাইপ শনাক্ত করে নতুন স্টেট তৈরি করছে।

অ্যাসিনক্রোনাস অ্যাকশন (Asynchronous Actions)

Redux তে সাধারণত একশনগুলি সিনক্রোনাস হয়, তবে কখনও কখনও অ্যাসিনক্রোনাস কাজের প্রয়োজন হয়, যেমন API কলের মাধ্যমে ডেটা ফেচ করা। Redux Thunk বা Redux Saga এর মতো middleware ব্যবহার করে অ্যাসিনক্রোনাস একশন হ্যান্ডেল করা যায়।

Redux Thunk এর উদাহরণ:

// Action creator with 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 একশন ডিসপ্যাচ করে।

Action এবং Action Creators-এর সারাংশ

Actions হল Redux-এর একশন অবজেক্ট যা স্টেট পরিবর্তনের সংকেত দেয়। একশন একটি type এবং অতিরিক্ত তথ্য (payload) ধারণ করে যা রিডিউসারকে জানায় কিভাবে স্টেট পরিবর্তন করতে হবে। Action Creators হল ফাংশন যা এই একশন অবজেক্ট তৈরি করে এবং একশন ডিসপ্যাচ করার প্রক্রিয়া সহজ করে তোলে। একশন টাইপগুলো সাধারণত কনস্ট্যান্ট হিসাবে ডিফাইন করা হয়, যা কোডের রক্ষণাবেক্ষণ সহজ করে।

Redux তে অ্যাসিনক্রোনাস কাজের জন্য Redux Thunk বা Redux Saga এর মতো middleware ব্যবহার করা যেতে পারে।

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 ব্যবহার করে অ্যাসিনক্রোনাস কাজ পরিচালনা করা যায়।

Action Types এবং Action Objects Redux-এর দুটি গুরুত্বপূর্ণ উপাদান। এগুলি একসাথে স্টেট পরিবর্তন করার জন্য ব্যবহার হয়। Action Type একশনের ধরন বা শ্রেণী নির্দেশ করে, এবং Action Object হল সেই তথ্য যা অ্যাকশনটি রিডিউসারে পাঠানোর জন্য প্রস্তুত থাকে।

Action Types কী?

Action Type হল একটি স্ট্রিং যা অ্যাকশনের ধরন বা কার্যকলাপ নির্ধারণ করে। এটি একশনের প্রধান চিহ্নিতকারী। type ফিল্ডটি প্রতিটি একশন অবজেক্টের মধ্যে থাকে এবং রিডিউসারে এই type অনুযায়ী স্টেট পরিবর্তন করার লজিক পরিচালিত হয়।

Action Types সাধারণত কনস্ট্যান্টস হিসেবে ডিফাইন করা হয়, যাতে টাইপিং এর ভুল কমানো যায় এবং কোড আরও পরিষ্কার এবং রিডেবেল হয়। সাধারণভাবে, একটি অ্যাকশন টাইপ শুধুমাত্র অ্যাকশন এর উদ্দেশ্য নির্দেশ করে (যেমন "ADD_TODO", "REMOVE_ITEM" ইত্যাদি), যাতে রিডিউসারে সহজে ম্যাচ করা যায়।

Action Types এর উদাহরণ:

// actionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';

এখানে, আমরা তিনটি অ্যাকশন টাইপ ডিফাইন করেছি:

• ADD_TODO: টুডু আইটেম যোগ করার জন্য।
• REMOVE_TODO: টুডু আইটেম মুছে ফেলার জন্য।
• TOGGLE_TODO: টুডু আইটেমের স্ট্যাটাস পরিবর্তন করার জন্য।

এই কনস্ট্যান্টগুলির মাধ্যমে, আমরা কোডে টাইপিংয়ের ভুল কমাতে পারি এবং অ্যাকশনের উদ্দেশ্য আরো পরিষ্কারভাবে বুঝতে পারি।

Action Object কী?

Action Object হল একটি জাভাস্ক্রিপ্ট অবজেক্ট যা type এবং অন্য প্রয়োজনীয় তথ্য ধারণ করে। একশন অবজেক্টটি যখন store.dispatch() দ্বারা স্টোরে পাঠানো হয়, তখন রিডিউসার সেই অবজেক্ট ব্যবহার করে স্টেট পরিবর্তন করে।

একটি অ্যাকশন অবজেক্টের দুটি প্রধান অংশ:

1. type: একশনের ধরন বা শ্রেণী (যেমন "ADD_TODO", "REMOVE_TODO")।
2. payload: (অপশনাল) অতিরিক্ত ডেটা যা একশনটির জন্য প্রয়োজন। এটি স্টেট পরিবর্তনের জন্য প্রয়োজনীয় তথ্য হতে পারে (যেমন, টুডু আইটেমের টেক্সট বা আইডি)।

Action Object এর উদাহরণ:

// Action Object
const addTodoAction = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux'
  }
};

এখানে:

• type: 'ADD_TODO' — এটি রিডিউসারকে জানায় যে, টুডু আইটেম যোগ করতে হবে।
• payload: { id: 1, text: 'Learn Redux' } — এটি টুডু আইটেমের তথ্য, যা রিডিউসারে প্রক্রিয়াকৃত হবে।

Action Object এর অন্য উদাহরণ:

const removeTodoAction = {
  type: 'REMOVE_TODO',
  payload: {
    id: 1
  }
};

এখানে:

• type: 'REMOVE_TODO' — এটি রিডিউসারকে জানায় যে, একটি টুডু আইটেম মুছে ফেলতে হবে।
• payload: { id: 1 } — এটি মুছে ফেলা টুডু আইটেমের আইডি।

Action Types এবং Action Objects এর মধ্যে সম্পর্ক

Action Types এবং Action Objects একে অপরের সাথে গভীরভাবে সম্পর্কিত। একশন টাইপ হল অ্যাকশনের ধরন বা শ্রেণী, যা রিডিউসারকে নির্দেশ দেয় কী ধরনের পরিবর্তন করতে হবে। এবং অ্যাকশন অবজেক্ট হল সেই ডেটা বা তথ্য, যা রিডিউসারকে স্টেট পরিবর্তন করতে সাহায্য করে।

উদাহরণ:

// Action Type
const ADD_TODO = 'ADD_TODO';

// Action Object
const addTodoAction = {
  type: ADD_TODO,
  payload: {
    id: 1,
    text: 'Learn Redux'
  }
};

এখানে, ADD_TODO হল একশন টাইপ এবং এটি addTodoAction অ্যাকশন অবজেক্টে ব্যবহার করা হয়েছে। যখন আমরা এই অ্যাকশনটি ডিসপ্যাচ করি, রিডিউসার সেই type এর ভিত্তিতে স্টেট আপডেট করবে।

Action Types ব্যবহারের সুবিধা

1. ভুল টাইপিং কমানো: একশন টাইপগুলো কনস্ট্যান্ট হিসেবে ডিফাইন করলে টাইপিংয়ের ভুল এড়ানো যায় এবং কোড আরও রিডেবেল হয়।
2. সেন্ট্রালাইজড টাইপ ডিফিনিশন: অ্যাকশন টাইপগুলো সাধারণত একটি আলাদা ফাইল বা মডিউলে রাখা হয়, যাতে এটি সহজেই অ্যাক্সেস করা যায় এবং প্রয়োজনীয় পরিবর্তন করা যায়।
3. স্টেট পরিবর্তনের সুসংগঠিত নির্দেশনা: অ্যাকশন টাইপগুলি অ্যাকশন অবজেক্টের মাধ্যমে রিডিউসারকে সুনির্দিষ্টভাবে জানান দেয়, যাতে স্টেট পরিবর্তন পরিচালনা করা সহজ হয়।

Action Types এবং Action Objects এর সাথে Redux ডেটা ফ্লো

Redux-এ ডেটা ফ্লো একমুখী থাকে। এটি নিশ্চিত করে যে, একমাত্র একশন ডিসপ্যাচ করার মাধ্যমে স্টেট পরিবর্তন হবে এবং অ্যাপ্লিকেশনটির অবস্থান পূর্বানুমানযোগ্য এবং ডিবাগযোগ্য থাকবে।

1. Action Type: প্রথমে একটি অ্যাকশন টাইপ তৈরি করা হয় (যেমন 'ADD_TODO')।
2. Action Object: তারপরে, অ্যাকশন অবজেক্ট তৈরি করা হয়, যা ঐ টাইপের সাথে অতিরিক্ত ডেটা (যেমন টুডু আইটেমের তথ্য) ধারণ করে।
3. Dispatch Action: অ্যাকশন অবজেক্টটি স্টোরে dispatch() করা হয়, যা রিডিউসারকে স্টেট পরিবর্তনের নির্দেশ দেয়।
4. Reducer: রিডিউসার এই অ্যাকশন অবজেক্টটি গ্রহণ করে এবং তার ভিত্তিতে নতুন স্টেট তৈরি করে।
5. Store: নতুন স্টেট স্টোরে সঞ্চিত হয়, এবং UI আপডেট হয়।

সারাংশ

Action Types হল স্ট্রিং যা একশনের ধরন নির্দেশ করে, এবং Action Objects হল সেই অবজেক্ট যা একশনটি সম্পাদন করতে প্রয়োজনীয় তথ্য ধারণ করে। Redux-এ Action Types কনস্ট্যান্ট হিসেবে ডিফাইন করা হয়, যাতে টাইপিংয়ের ভুল কমানো যায় এবং কোড পরিষ্কার থাকে। Action Objects স্টোরে পাঠানোর মাধ্যমে রিডিউসারকে জানায় কী ধরনের স্টেট পরিবর্তন করতে হবে। Action Types এবং Action Objects একসাথে কাজ করে অ্যাপ্লিকেশনের স্টেট পরিবর্তন সহজ, সুসংগঠিত এবং পূর্বানুমানযোগ্য করে তোলে।

Action Creators হল ফাংশন যা অ্যাকশন অবজেক্ট তৈরি করে এবং এটি স্টোরে পাঠানোর জন্য ডিসপ্যাচ (dispatch) করা হয়। এই ফাংশনগুলি কোড পুনঃব্যবহারযোগ্যতা এবং পরিষ্কারতা নিশ্চিত করতে সহায়তা করে। সাধারণভাবে, অ্যাকশন অবজেক্টগুলি সরাসরি স্টোরে ডিসপ্যাচ করার পরিবর্তে, Action Creators ব্যবহার করে ডিসপ্যাচ করা হয়।

Action Creators আপনাকে আপনার অ্যাকশনগুলি অর্গানাইজড এবং স্কেলেবল রাখতে সাহায্য করে, যা একটি বড় অ্যাপ্লিকেশনে কোড মেইনটেন করা সহজ করে।

Action Creator কী?

Action Creator হলো একটি ফাংশন যা একটি অ্যাকশন অবজেক্ট রিটার্ন করে। এই ফাংশনের মাধ্যমে আপনি অ্যাকশন তৈরি করতে পারেন এবং সেই অ্যাকশনটি dispatch করতে পারেন।

Action Creators-কে ব্যবহারের সুবিধা:

1. কোড পুনঃব্যবহারযোগ্যতা: একই অ্যাকশন টাইপ বারবার ব্যবহার করতে Action Creators ব্যবহার করা সহজ হয়।
2. বিষয়ভিত্তিক ফাংশন: অ্যাকশন তৈরির জন্য বিষয়ভিত্তিক ফাংশন ব্যবহার করলে কোডের স্পষ্টতা বাড়ে।
3. কোড পরিষ্কার রাখা: অ্যাকশন অবজেক্টগুলোকে কোডের মধ্যে সরাসরি ব্যবহার করার চেয়ে Action Creators-এর মাধ্যমে আলাদা ফাংশনে রাখা পরিষ্কার এবং মেইনটেনেবল।

Action Creators তৈরি করা

Action Creator সাধারণত একটি ফাংশন যা একটি অ্যাকশন অবজেক্ট রিটার্ন করে। এই অবজেক্টে type থাকে, যা রিডিউসারের জন্য একশনটি চিহ্নিত করে, এবং প্রয়োজন হলে payload থাকে যা একশনটির সাথে সম্পর্কিত ডেটা ধারণ করে।

উদাহরণ:

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশনে টুডু আইটেম যোগ করার জন্য একশন তৈরি করতে হবে। এই জন্য একটি Action Creator লিখা যাবে:

// Action Type
const ADD_TODO = 'ADD_TODO';

// Action Creator
function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: {
      id: Date.now(),  // unique id for each todo
      text: text
    }
  };
}

এখানে:

• type: 'ADD_TODO' - এটি একশনের ধরন।
• payload: { id, text } - এটি টুডু আইটেমের তথ্য যা রিডিউসারে পাঠানো হবে।

Action Creator ব্যবহার করা

Action Creator ব্যবহার করে আপনি খুব সহজেই একশন তৈরি করতে পারেন এবং ডিসপ্যাচ করতে পারেন। অ্যাকশনটি স্টোরে পাঠানোর জন্য dispatch() ফাংশন ব্যবহার করা হয়।

উদাহরণ:

// Store তৈরি
import { createStore } from 'redux';

// Reducer
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
}

const store = createStore(todosReducer);

// Dispatch Action using Action Creator
store.dispatch(addTodo('Learn Redux'));

এখানে:

• addTodo('Learn Redux') - এই ফাংশন কলটি একটি অ্যাকশন তৈরি করবে যেটি টুডু আইটেম হিসেবে 'Learn Redux' টেক্সট ধারণ করবে।
• store.dispatch() - এই ফাংশনটি অ্যাকশনটি স্টোরে পাঠিয়ে রিডিউসারের মাধ্যমে স্টেট পরিবর্তন করবে।

Action Creators এর আরো উদাহরণ

Redux অ্যাপ্লিকেশনে একাধিক একশন ব্যবহার করা হয়, যেমন টুডু আইটেমের ডিলিট, টুডু আইটেম কমপ্লিট করা ইত্যাদি। এসব কাজের জন্য বিভিন্ন Action Creators তৈরি করা যেতে পারে।

উদাহরণ: টুডু আইটেম ডিলিট করার জন্য Action Creator

// Action Type
const DELETE_TODO = 'DELETE_TODO';

// Action Creator for deleting todo
function deleteTodo(id) {
  return {
    type: DELETE_TODO,
    payload: id  // id of the todo to be deleted
  };
}

উদাহরণ: টুডু আইটেম কমপ্লিট করার জন্য Action Creator

// Action Type
const TOGGLE_TODO = 'TOGGLE_TODO';

// Action Creator for toggling todo completion status
function toggleTodo(id) {
  return {
    type: TOGGLE_TODO,
    payload: id  // id of the todo to toggle completion
  };
}

অ্যাকশন টাইপ কনস্ট্যান্ট ব্যবহার

Redux-এ, একশন টাইপ স্ট্রিংগুলিকে constant হিসেবে সংরক্ষণ করা ভাল অভ্যাস, যাতে ভুল টাইপ ব্যবহৃত না হয় এবং ডিবাগ করা সহজ হয়। এজন্য সাধারণত একটি আলাদা ফাইল (যেমন actionTypes.js) তৈরি করা হয় যেখানে একশন টাইপগুলিকে কনস্ট্যান্ট হিসেবে রাখা হয়।

উদাহরণ: Action Types কনস্ট্যান্ট

// actionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';

এবং তারপর, এই কনস্ট্যান্টগুলি Action Creator-এ ব্যবহার করা হয়:

import { ADD_TODO } from './actionTypes';

function addTodoAction(text) {
  return {
    type: ADD_TODO,
    payload: { text }
  };
}

এভাবে আপনি একশন টাইপগুলো একক স্থানে সংরক্ষণ করে কোডের নিরাপত্তা এবং রিডেবিলিটি বাড়াতে পারেন।

অ্যাসিনক্রোনাস Action Creators

Redux অ্যাপ্লিকেশনগুলিতে সাধারণত একশনগুলি সিনক্রোনাস হয়ে থাকে, তবে কখনও কখনও অ্যাসিনক্রোনাস একশন প্রয়োজন হতে পারে, যেমন API কলের মাধ্যমে ডেটা ফেচ করা। Redux তে অ্যাসিনক্রোনাস একশন পরিচালনার জন্য Redux Thunk বা Redux Saga মডিউল ব্যবহার করা হয়।

উদাহরণ: Redux Thunk এর মাধ্যমে অ্যাসিনক্রোনাস Action Creator

function fetchTodos() {
  return function(dispatch) {
    dispatch({ type: 'FETCH_TODOS_START' });

    fetch('/api/todos')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_TODOS_FAILURE', payload: error });
      });
  };
}

এখানে:

• fetchTodos হল একটি অ্যাসিনক্রোনাস অ্যাকশন ক্রিয়েটর, যা API থেকে ডেটা নিয়ে আসে এবং ডিসপ্যাচ করে।
• dispatch()-এর মাধ্যমে শুরু, সফল এবং ব্যর্থ হওয়ার স্টেটও আপডেট করা হয়।

সারাংশ

Action Creators হল ফাংশন যা অ্যাকশন অবজেক্ট তৈরি করে এবং সেই অ্যাকশনটি Redux স্টোরে ডিসপ্যাচ করে। এটি কোড পুনঃব্যবহারযোগ্যতা, পরিষ্কারতা এবং স্কেলেবিলিটি বৃদ্ধি করে। আপনি একাধিক একশন টাইপ ব্যবহার করে বিভিন্ন Action Creators তৈরি করতে পারেন এবং একশন টাইপগুলো সাধারণত কনস্ট্যান্ট হিসেবে সংরক্ষণ করা হয়। Redux অ্যাসিনক্রোনাস একশনের জন্য Redux Thunk বা Redux Saga ব্যবহার করতে পারেন।

Redux-এ Action Dispatch হল সেই প্রক্রিয়া যেখানে অ্যাপ্লিকেশন কোনো একশন (Action) স্টোরে পাঠায়। একশন হল একটি অবজেক্ট, যা স্টেট পরিবর্তনের সংকেত দেয়, এবং dispatch() ফাংশন ব্যবহার করে একশনটি রিডিউসারকে পৌঁছানো হয়। একবার একশন ডিসপ্যাচ হলে, রিডিউসার স্টেটের পরিবর্তন ঘটায় এবং সেই পরিবর্তিত স্টেট স্টোরে সংরক্ষিত হয়। এর পর, স্টোরে থাকা নতুন স্টেটের ভিত্তিতে UI আপডেট হয়।

Action Dispatch করার মাধ্যমে Redux স্টেট ম্যানেজমেন্টের কার্যপ্রণালী শুরু হয়, যা একক বা অ্যাসিনক্রোনাস কার্যকলাপের ফলস্বরূপ হতে পারে।

Action Dispatch কী?

Action Dispatch হল একশনটি রিডিউসারে পাঠানোর প্রক্রিয়া। যখন আপনি dispatch() ফাংশন ব্যবহার করেন, তখন আপনি একশনটি স্টোরে পাঠাচ্ছেন, যাতে রিডিউসার তা প্রক্রিয়া করে স্টেট পরিবর্তন করতে পারে। এটি Redux-এর মূল স্টেপ যেখানে একশনকে কার্যকরী করা হয় এবং স্টেট আপডেট হয়।

Action Dispatch করার প্রক্রিয়া

1. Action তৈরি: প্রথমে একটি একশন অবজেক্ট তৈরি করা হয়, যা স্টেট পরিবর্তন করার উদ্দেশ্যে রিডিউসারকে নির্দেশ দেয়। একশনটি সাধারণত type এবং payload ধারণ করে।
2. Dispatching Action: একবার একশন তৈরি হলে, dispatch() ফাংশন ব্যবহার করে সেই একশনটি স্টোরে পাঠানো হয়। এটি রিডিউসারের মাধ্যমে স্টেট পরিবর্তন প্রক্রিয়া শুরু করে।
3. Reducer: রিডিউসার একশন গ্রহণ করে, স্টেটের একটি নতুন কপি তৈরি করে এবং এটি স্টোরে সঞ্চিত হয়। এরপর স্টোরের মাধ্যমে UI আপডেট হয়।

Action Dispatch করার উদাহরণ

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন আছে যেখানে আমরা একটি টুডু আইটেম যোগ করতে চাই। প্রথমে, আমরা একটি একশন তৈরি করব এবং পরে সেটি ডিসপ্যাচ করব।

১. Action তৈরি করা

// Action
const addTodoAction = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux'
  }
};

এখানে, addTodoAction একটি একশন অবজেক্ট, যেখানে type হিসেবে 'ADD_TODO' এবং payload হিসেবে টুডু আইটেমের তথ্য রয়েছে।

২. Dispatch Action

Redux স্টোরে একশন ডিসপ্যাচ করতে, আপনি dispatch() ফাংশন ব্যবহার করবেন:

store.dispatch(addTodoAction);

এখানে, dispatch() ফাংশনটি addTodoAction একশনটি স্টোরে পাঠাচ্ছে, যা রিডিউসারকে নির্দেশ দেবে যে, একটি নতুন টুডু আইটেম যোগ করতে হবে।

৩. Reducer

// Reducer
function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

এখানে, todosReducer একটি রিডিউসার ফাংশন, যা ADD_TODO টাইপের একশন পাওয়ার পর স্টেটের একটি নতুন কপি তৈরি করে এবং নতুন টুডু আইটেম যোগ করে।

Dispatch এর সাথে State পরিবর্তন

Redux এর ডেটা ফ্লো একমুখী থাকে, এবং dispatch() এর মাধ্যমে স্টেট পরিবর্তন প্রক্রিয়া শুরু হয়। এই একমুখী ডেটা ফ্লোতে স্টেট কেবল একমাত্র রিডিউসারের মাধ্যমে পরিবর্তিত হয়, এবং একশন পাঠানোর মাধ্যমে সেই পরিবর্তন ঘটে।

একমুখী ডেটা ফ্লো:

1. Action Dispatch → store.dispatch(action)
2. Reducer → store স্টেটের নতুন কপি তৈরি করে।
3. Store → স্টোর নতুন স্টেট ধারণ করে।
4. UI Update → নতুন স্টেটের ভিত্তিতে UI আপডেট হয়।

Asynchronous Action Dispatch (Redux Thunk ব্যবহার করে)

যখন আপনি অ্যাসিনক্রোনাস কাজ (যেমন API কল) করতে চান, তখন Redux Thunk মiddleware ব্যবহার করতে পারেন। Redux Thunk আপনাকে একশন ক্রিয়েটর ফাংশনে একটি ফাংশন ফেরত দেওয়ার অনুমতি দেয়, যা পরে ডিসপ্যাচ করা হয়।

উদাহরণ: অ্যাসিনক্রোনাস Action Dispatch

// Action creator with Thunk (Asynchronous action)
function fetchTodos() {
  return function(dispatch) {
    dispatch({ type: 'FETCH_TODOS_START' });

    fetch('/api/todos')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_TODOS_FAILURE', payload: error });
      });
  };
}

এখানে, fetchTodos একটি অ্যাসিনক্রোনাস একশন ক্রিয়েটর, যা API কল করে এবং সাফল্য বা ব্যর্থতার ভিত্তিতে একশন ডিসপ্যাচ করে।

Redux DevTools এর মাধ্যমে Action Dispatch পরীক্ষা

Redux DevTools হল একটি ডেভেলপার টুল, যা Redux অ্যাপ্লিকেশনের স্টেট পরিবর্তন এবং একশন ডিসপ্যাচের কার্যপ্রণালী পরীক্ষা করার জন্য ব্যবহৃত হয়। এটি আপনাকে একশন ডিসপ্যাচ করার পর স্টোরের পরিবর্তন দেখতে এবং অ্যাপ্লিকেশনটি ডিবাগ করতে সহায়তা করে।

সারাংশ

Action Dispatch Redux-এর একটি গুরুত্বপূর্ণ অংশ, যা স্টেট পরিবর্তন করার সংকেত দেয়। একশনটি ডিসপ্যাচ করার মাধ্যমে, রিডিউসার স্টেট পরিবর্তন করে এবং নতুন স্টেট স্টোরে সঞ্চিত হয়। অ্যাসিনক্রোনাস কাজের জন্য Redux Thunk ব্যবহার করা হয়, যা আপনাকে একশন ক্রিয়েটরের মাধ্যমে ডাইনামিকলি ডিসপ্যাচ করার সুযোগ দেয়। Redux-এর একমুখী ডেটা ফ্লো এবং dispatch এর মাধ্যমে স্টেট পরিবর্তন অ্যাপ্লিকেশনকে আরো স্কেলেবল, পূর্বানুমানযোগ্য এবং ডিবাগযোগ্য করে তোলে।