Web Development Custom Middleware তৈরি করা গাইড ও নোট

Middleware রিডাক্সের একটি শক্তিশালী ফিচার, যা অ্যাপ্লিকেশনের ডেটা ফ্লোতে হস্তক্ষেপ করতে সাহায্য করে। এটি একশন ডিসপ্যাচ করার আগেও বা পরে কিছু কার্যকলাপ (যেমন লগিং, অ্যাসিনক্রোনাস কাজ, একশন ট্র্যাকিং) সম্পাদন করার সুযোগ প্রদান করে। আপনি যদি নিজের প্রয়োজন অনুযায়ী কিছু বিশেষ কার্যকলাপ বা লজিক যুক্ত করতে চান, তবে Custom Middleware তৈরি করা যেতে পারে।

Middleware কী?

Redux Middleware হলো একটি ফাংশন যা dispatch এবং getState এর সাথে কাজ করে। এটি আপনাকে অ্যাকশনের প্রক্রিয়ার মাঝে হস্তক্ষেপ করতে এবং একশন বা স্টেটের উপর কিছু পরিবর্তন বা প্রভাব ফেলতে অনুমতি দেয়। Middleware এমন ধরনের কোড যা রিডিউসার এর আগেও কাজ করে এবং অ্যাকশন ডিসপ্যাচ হওয়ার সময় কিছু কার্যকলাপ সম্পাদন করতে পারে।

Custom Middleware তৈরি করা

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

Middleware Structure

Redux Middleware সাধারণত নিচের মত একটি কাঠামো অনুসরণ করে:

const customMiddleware = store => next => action => {
  // Middleware code here

  return next(action); // Action next middleware বা reducer এ পাঠান
};

এখানে:

• store - স্টোরের সাথে সম্পর্কিত ফাংশনগুলি যেমন dispatch এবং getState।
• next - পরবর্তী middleware বা রিডিউসারের দিকে একশন পাস করার ফাংশন।
• action - বর্তমানে ডিসপ্যাচ করা একশন।

Custom Middleware এর উদাহরণ

ধরা যাক, আমরা একটি কাস্টম মিডলওয়্যার তৈরি করতে চাই যা অ্যাকশনের ধরন দেখে তার লগ মেসেজ প্রিন্ট করবে। উদাহরণস্বরূপ, যদি ADD_TODO একশন থাকে, তবে এটি লগ করবে "Adding todo...". অন্যথায়, অন্য কোন একশনের জন্য আলাদা লগ করবে।

const logMiddleware = store => next => action => {
  console.log('Dispatching action:', action);

  // কাস্টম একশন টাইপ চেক করা
  if (action.type === 'ADD_TODO') {
    console.log('Adding todo...');
  }

  // পরবর্তী middleware অথবা reducer এ একশন পাস করা
  return next(action);
};

এখানে:

• logMiddleware একটি কাস্টম মিডলওয়্যার, যা ডিসপ্যাচ হওয়া একশন সম্পর্কে লগ তৈরি করবে।
• next(action) এর মাধ্যমে একশন পরবর্তী মিডলওয়্যার বা রিডিউসারের কাছে পাঠানো হয়।

Middleware ব্যবহার করা

একটি কাস্টম মিডলওয়্যার তৈরি করার পর, আপনাকে তা Redux স্টোরে সংযুক্ত করতে হবে। স্টোর তৈরির সময় applyMiddleware ফাংশন ব্যবহার করে মিডলওয়্যারটি যুক্ত করা হয়।

import { createStore, applyMiddleware } from 'redux';

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

// স্টোর তৈরি করা এবং মিডলওয়্যার যোগ করা
const store = createStore(
  todosReducer,
  applyMiddleware(logMiddleware) // মিডলওয়্যার এখানে যোগ করা হচ্ছে
);

// ডিসপ্যাচ করা
store.dispatch({ type: 'ADD_TODO', payload: { text: 'Learn Redux' } });

এখানে:

• applyMiddleware(logMiddleware) - এই ফাংশনটি আমাদের কাস্টম মিডলওয়্যার logMiddleware স্টোরে যোগ করে।
• স্টোর তৈরি করার পর, যখন ADD_TODO একশন ডিসপ্যাচ হবে, তখন কাস্টম মিডলওয়্যারটি কাজ করবে এবং লগ তৈরি করবে।

কাস্টম মিডলওয়্যার এর আরও উদাহরণ

উদাহরণ ১: একশনটির পেটার্ন চেক করে (Action Validation)

ধরা যাক, আপনি চান যে, কোন একশন পেটার্ন ঠিক না থাকলে তাকে dispatch না করতে দেওয়া হোক। এমন একটি মিডলওয়্যার তৈরি করা যেতে পারে:

const actionValidatorMiddleware = store => next => action => {
  // যদি একশনটি type ছাড়া হয়, তবে লগ করুন এবং dispatch বন্ধ করুন
  if (!action.type) {
    console.error('Action must have a type property!');
    return;
  }

  // সঠিক একশন টাইপ পেলে পরবর্তী middleware বা reducer এ পাঠান
  return next(action);
};

উদাহরণ ২: অ্যাসিনক্রোনাস একশন হ্যান্ডলিং (Async Action Handling)

Redux মিডলওয়্যার অ্যাসিনক্রোনাস একশনও পরিচালনা করতে পারে, যেমন API কল করা বা ওয়েবসোকেটের মাধ্যমে ডেটা পাওয়া। এই ধরনের মিডলওয়্যার তৈরি করতে আপনি অ্যাসিনক্রোনাস কাজের জন্য dispatch ফাংশন ব্যবহার করতে পারেন।

const asyncMiddleware = store => next => action => {
  // যদি অ্যাকশনটি একটি ফাংশন হয় (অ্যাসিনক্রোনাস কাজের জন্য)
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState); // অ্যাসিনক্রোনাস কাজ
  }

  return next(action); // অন্য একশন হলে, পরবর্তী মিডলওয়্যার বা reducer এ পাঠান
};

এখানে:

• action যদি একটি ফাংশন হয়, তবে এটি dispatch এবং getState দিয়ে অ্যাসিনক্রোনাস কাজ পরিচালনা করবে।
• অন্যথায়, একশনটি সাধারণভাবে পরবর্তী মিডলওয়্যার বা রিডিউসারে পাঠানো হবে।

সারাংশ

Custom Middleware তৈরি করা Redux-এ স্টেট ম্যানেজমেন্টের প্রক্রিয়া আরও শক্তিশালী এবং নমনীয় করে তোলে। এটি আপনাকে একশনের ওপর হস্তক্ষেপ করার সুযোগ দেয়, যা অ্যাসিনক্রোনাস কাজ, একশন ভ্যালিডেশন, লগিং, অথবা অন্যান্য কাস্টম ফিচার তৈরি করতে সহায়তা করে। কাস্টম মিডলওয়্যার সাধারণত store, next, এবং action এর উপর কাজ করে এবং একশন ফ্লো প্রক্রিয়ার মধ্যে অবস্থান নেয়। applyMiddleware ফাংশন ব্যবহার করে Redux স্টোরে মিডলওয়্যার যোগ করা হয়।