Web Development Action Dispatch এর প্রক্রিয়া গাইড ও নোট

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

এখানে আমরা Action Dispatch-এর প্রক্রিয়া বিস্তারিতভাবে ব্যাখ্যা করবো।

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

Redux-এর মধ্যে স্টেট পরিবর্তন করার একমাত্র মাধ্যম হল Action Dispatch। একশন (Action) হল একটি সাধারণ JavaScript অবজেক্ট যা অ্যাপ্লিকেশনকে নির্দেশ দেয় স্টেট কিভাবে পরিবর্তন করতে হবে। একশনটি স্টোরে dispatch করা হয়, এবং Redux সেই একশনটি গ্রহণ করে, সেটি রিডিউসারে পাঠায়। রিডিউসার স্টেটের একটি নতুন কপি তৈরি করে এবং সেই স্টেটটি ফেরত পাঠায়, যেটি পরবর্তীতে অ্যাপ্লিকেশনের UI তে প্রতিফলিত হয়।

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

1. Action তৈরি করা (Creating an Action):
   অ্যাকশনটি একটি সাধারণ JavaScript অবজেক্ট যা কমপক্ষে একটি type ফিল্ড থাকে। type হল সেই একশনের কার্যক্রম বা উদ্দেশ্য।
2. Action Dispatch করা (Dispatching the Action):
   একশনটি স্টোরে dispatch করা হয় store.dispatch() ফাংশন ব্যবহার করে। এই ফাংশনটি অ্যাকশন অবজেক্ট গ্রহণ করে এবং রিডিউসারের কাছে পাঠায়।
3. Reducer এর মাধ্যমে স্টেট পরিবর্তন (State Change via Reducer):
   রিডিউসার সেই অ্যাকশনটি গ্রহণ করে এবং পূর্ববর্তী স্টেট এবং অ্যাকশন অবজেক্টের সাহায্যে নতুন স্টেট তৈরি করে। রিডিউসার কখনো সরাসরি স্টেট পরিবর্তন করে না, বরং একটি নতুন কপি তৈরি করে।
4. Store এর মাধ্যমে নতুন স্টেট গ্রহণ (Receiving New State via Store):
   স্টোর নতুন স্টেট গ্রহণ করে এবং সেই অনুযায়ী অ্যাপ্লিকেশনের UI বা কম্পোনেন্টগুলোর স্টেট আপডেট হয়।

Action Dispatch এর উদাহরণ

ধরা যাক, আমাদের একটি সিম্পল কাউন্টার অ্যাপ্লিকেশন আছে যেখানে একটি কাউন্টার ভ্যালু বাড়ানো এবং কমানো যাবে। আমরা দেখবো কিভাবে Action Dispatch এর মাধ্যমে স্টেট পরিবর্তন ঘটে।

স্টেপ ১: Action তৈরি করা

একটি একশন তৈরি করা হবে যেটি INCREMENT এবং DECREMENT এর জন্য হবে।

// Action creator for incrementing counter
const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

// Action creator for decrementing counter
const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

এখানে:

• increment এবং decrement দুটি action creator ফাংশন যা type ফিল্ড সহ একশন অবজেক্ট তৈরি করে।

স্টেপ ২: Reducer তৈরি করা

এখন, আমরা একটি রিডিউসার তৈরি করব যা কাউন্টার ভ্যালু বাড়ানো বা কমানোর কাজ করবে।

// Reducer to manage counter state
function counterReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
}

এখানে:

• INCREMENT অ্যাকশনটি স্টেটের counter ভ্যালু ১ বাড়াবে।
• DECREMENT অ্যাকশনটি স্টেটের counter ভ্যালু ১ কমাবে।

স্টেপ ৩: Store তৈরি করা

এখন, রিডিউসার ব্যবহার করে একটি Redux স্টোর তৈরি করা হবে।

import { createStore } from 'redux';

// Creating the store with the reducer
const store = createStore(counterReducer);

// Subscribing to the store to listen for state changes
store.subscribe(() => {
  console.log('State updated:', store.getState());
});

এখানে:

• createStore(counterReducer) ব্যবহার করে স্টোর তৈরি করা হয়েছে, যেখানে counterReducer স্টেট পরিবর্তন করবে।

স্টেপ ৪: Action Dispatch করা

এখন আমরা store.dispatch() ব্যবহার করে একশন ডিসপ্যাচ করব।

// Dispatching increment and decrement actions
store.dispatch(increment()); // Counter value will be 1
store.dispatch(increment()); // Counter value will be 2
store.dispatch(decrement()); // Counter value will be 1

এখানে:

• store.dispatch(increment()) দ্বারা INCREMENT অ্যাকশন ডিসপ্যাচ করা হচ্ছে, যেটি স্টেটের counter ভ্যালু ১ বাড়াবে।
• store.dispatch(decrement()) দ্বারা DECREMENT অ্যাকশন ডিসপ্যাচ করা হচ্ছে, যেটি counter ভ্যালু ১ কমাবে।

Action Dispatch এর স্টেপ বাই স্টেপ ফ্লো

1. Action Creation: প্রথমে একটি অ্যাকশন তৈরি করা হয়। এটি একটি অবজেক্ট হতে হবে যার মধ্যে একটি type ফিল্ড থাকে (যেমন 'INCREMENT', 'DECREMENT')। কিছু অ্যাকশন payload ফিল্ডও ধারণ করতে পারে।
2. Dispatching the Action: অ্যাকশনটি store.dispatch() ফাংশনের মাধ্যমে স্টোরে পাঠানো হয়। এটি স্টোরকে জানায় যে, স্টেটে একটি পরিবর্তন করা প্রয়োজন।
3. Reducer Handling: স্টোরে অ্যাকশনটি পৌঁছানোর পরে, তা রিডিউসারের কাছে পৌঁছে। রিডিউসার বর্তমান স্টেট এবং অ্যাকশন অবজেক্ট গ্রহণ করে এবং স্টেটের একটি নতুন কপি তৈরি করে।
4. Store Updates State: নতুন স্টেট তৈরি হওয়ার পর, Redux স্টোর সেই স্টেট গ্রহণ করে এবং অ্যাপ্লিকেশনের UI অথবা যেকোনো অংশে সেই স্টেট প্রতিফলিত হয়।
5. UI Update (optional): স্টোরে স্টেট পরিবর্তিত হলে, UI সাবস্ক্রাইবারদের মাধ্যমে বা রিএক্ট কম্পোনেন্টে রেন্ডারিংয়ের মাধ্যমে আপডেট হয়।

অ্যাসিনক্রোনাস অ্যাকশন Dispatch করা

Redux-এ সাধারণত সিনক্রোনাস একশন ব্যবহৃত হয়, তবে কখনও কখনও অ্যাসিনক্রোনাস একশনও প্রয়োজন হয় (যেমন API কল)। Redux Thunk এর মাধ্যমে অ্যাসিনক্রোনাস অ্যাকশন ডিসপ্যাচ করা যায়।

Redux Thunk এর উদাহরণ:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// Reducer
function counterReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    default:
      return state;
  }
}

// Creating store with middleware
const store = createStore(counterReducer, applyMiddleware(thunk));

// Async action creator
function incrementAsync() {
  return function(dispatch) {
    setTimeout(() => {
      dispatch({ type: 'INCREMENT' });
    }, 1000);
  };
}

// Dispatching async action
store.dispatch(incrementAsync());

এখানে:

• incrementAsync একটি অ্যাসিনক্রোনাস অ্যাকশন ক্রিয়েটর, যা ১ সেকেন্ড পরে INCREMENT অ্যাকশন ডিসপ্যাচ করবে।

সারাংশ

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