Redux Middleware হল একটি বিশেষ ফাংশন বা কোডের এক ধরনের মধ্যস্থ উপাদান, যা Redux স্টোরের মধ্যে একশন ডিসপ্যাচ হওয়ার আগেই বা স্টোর থেকে রিডিউসারে যাওয়ার আগে একশনগুলোকে প্রক্রিয়া করতে সক্ষম হয়। এটি একশনগুলিকে লগ করতে, অ্যাসিনক্রোনাস কাজ পরিচালনা করতে, এবং অন্যান্য জটিল লজিকাল কার্যক্রম পরিচালনা করতে ব্যবহৃত হয়। Middleware মূলত একশন এবং রিডিউসার এর মধ্যে কাজ করে এবং অ্যাপ্লিকেশনের ফ্লোতে অতিরিক্ত ক্ষমতা যোগ করে।
Redux Middleware এর প্রাথমিক উদ্দেশ্য
- অ্যাসিনক্রোনাস কাজ হ্যান্ডলিং (Handling Asynchronous Tasks): একশনগুলো সাধারণত সিনক্রোনাস হয়ে থাকে, তবে Middleware ব্যবহার করে অ্যাসিনক্রোনাস একশন প্রক্রিয়াকরণ করা যায়। উদাহরণস্বরূপ, API কল, ডেটা লোডিং ইত্যাদি।
- একশন লগিং (Logging Actions): Middleware একশন ডিসপ্যাচ করার আগে বা পরে লগ তথ্য প্রদান করতে পারে, যা ডিবাগিং এবং ট্র্যাকিংয়ের জন্য সহায়ক।
- একশন পরিবর্তন (Action Modification): Middleware একশনের মধ্যে কিছু পরিবর্তন বা প্রসেসিং করতে পারে। যেমন, কিছু কন্ডিশন চেক করে নির্দিষ্ট একশনটিকে ব্লক করা বা মডিফাই করা।
- স্টেট কনসোলিডেশন (State Consolidation): Middleware বিভিন্ন একশনগুলির উপর নির্ভর করে একত্রিত বা পূর্বনির্ধারিত স্টেট চালাতে সাহায্য করতে পারে।
Redux Middleware কিভাবে কাজ করে?
Redux Middleware স্টোরে একটি ফাংশন হিসেবে কাজ করে এবং একশন ডিসপ্যাচ হওয়ার আগে বা পরে সেগুলোর উপর হুক করা যায়। Redux Middleware-এর সাধারণ গঠন একটি ফাংশন যা স্টোরের dispatch এবং getState ফাংশন গ্রহণ করে।
Redux Middleware এর মৌলিক গঠন:
const exampleMiddleware = store => next => action => {
// Middleware logic
return next(action); // Action প্রক্রিয়া করা
};
এখানে:
- store: Redux স্টোর
- next: পরবর্তী middleware বা রিডিউসার, যা একশনকে পরবর্তী প্রক্রিয়া (যেমন রিডিউসার) এর জন্য পাঠায়।
- action: একশন অবজেক্ট যা ডিসপ্যাচ করা হয়েছে।
Redux Middleware এর উদাহরণ
১. লগিং Middleware:
এই Middleware একশনের বিষয়বস্তু লগ করবে।
const loggerMiddleware = store => next => action => {
console.log('Dispatching action:', action);
return next(action); // একশন পরবর্তী Middleware বা রিডিউসারে যাবে
};
২. অ্যাসিনক্রোনাস একশন (Redux Thunk):
Redux Thunk একটি সাধারণ এবং জনপ্রিয় Middleware যা অ্যাসিনক্রোনাস একশন প্রক্রিয়া করার জন্য ব্যবহৃত হয়।
const thunkMiddleware = store => next => action => {
if (typeof action === 'function') {
// এটি একটি অ্যাসিনক্রোনাস ফাংশন, তাই আমরা এটি কল করি
return action(store.dispatch, store.getState);
}
return next(action); // একশন সিনক্রোনাস হলে পরবর্তী Middleware বা রিডিউসারে পাঠানো হয়
};
এখানে, যদি একশনটি একটি ফাংশন হয় (যেমন, API কল করার জন্য), তাহলে Thunk Middleware সেই ফাংশনটিকে ডিসপ্যাচ করে, অন্যথায় এটি সাধারণ একশন হিসেবে পরবর্তী প্রক্রিয়াতে পাঠায়।
৩. অ্যাসিনক্রোনাস একশন API কলের উদাহরণ:
function fetchData() {
return (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 });
});
};
}
// Store Configuration with Thunk Middleware
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
);
store.dispatch(fetchData());
এখানে, fetchData() একটি অ্যাসিনক্রোনাস একশন, যা প্রথমে FETCH_DATA_START একশন পাঠায়, তারপর API থেকে ডেটা ফেচ করে এবং সফল হলে FETCH_DATA_SUCCESS একশন পাঠায়।
Redux Middleware কিভাবে ব্যবহার করবেন?
Redux-এ Middleware ব্যবহার করতে হলে applyMiddleware ফাংশন ব্যবহার করা হয়। এই ফাংশনটি স্টোর তৈরি করার সময় Middleware যোগ করতে সাহায্য করে।
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; // Redux Thunk import
const store = createStore(
rootReducer, // রিডিউসার
applyMiddleware(thunk) // Middleware যোগ করা
);
এখানে, thunk Middleware স্টোরে যুক্ত করা হয়েছে, যা অ্যাসিনক্রোনাস কাজ করার সুবিধা দেয়।
Redux Middleware এর কিছু জনপ্রিয় উদাহরণ
- Redux Thunk:
- অ্যাসিনক্রোনাস একশন ব্যবস্থাপনার জন্য ব্যবহৃত হয়। এটি অ্যাকশন ক্রিয়েটরগুলোকে ফাংশন হিসাবে লিখতে সহায়তা করে।
- Redux Saga:
- অ্যাসিনক্রোনাস কাজের জন্য একটি শক্তিশালী alternative, যা সাধারণত থাঙ্কের চেয়ে জটিল অ্যাসিনক্রোনাস ফ্লো পরিচালনা করতে ব্যবহৃত হয়।
- redux-logger:
- একশন এবং স্টেট পরিবর্তনগুলো লগ করার জন্য ব্যবহৃত একটি middleware। এটি ডিবাগিংয়ের সময় খুবই কার্যকর।
- redux-promise:
- এটি একটি Middleware যা promise-based অ্যাসিনক্রোনাস একশনগুলোকে হ্যান্ডল করতে ব্যবহৃত হয়।
Middleware এর ব্যবহারিক সুবিধা
- অ্যাসিনক্রোনাস কাজের সিম্পলিফিকেশন: অ্যাসিনক্রোনাস একশনগুলির সাথে কাজ করার জন্য Middleware যেমন Redux Thunk বা Redux Saga অত্যন্ত সাহায্যকারী। এর মাধ্যমে API কল বা সময়সাপেক্ষ কাজ সহজে পরিচালনা করা যায়।
- ডিবাগিং এবং লগিং: Middleware এর মাধ্যমে একশন লগ করা যায়, যা অ্যাপ্লিকেশনের কার্যকলাপ মনিটর করতে এবং ডিবাগ করতে সহায়তা করে।
- একশন ট্রান্সফরমেশন: একশন গুলি প্রক্রিয়া বা ট্রান্সফর্ম করতে Middleware ব্যবহৃত হতে পারে, যা কোডের পুনঃব্যবহারযোগ্যতা এবং ক্লিনলিনেসে সাহায্য করে।
- স্টেট কনসোলিডেশন: স্টোরের স্টেটকে একাধিক একশনের উপর নির্ভর করে সামঞ্জস্যপূর্ণ এবং কনসোলিডেটেড রাখা যায়।
সারাংশ
Redux Middleware হল এমন একটি ফাংশন যা একশন ডিসপ্যাচ হওয়ার আগে বা পরে একশনের উপর কার্যক্রম পরিচালনা করতে সক্ষম। Middleware অ্যাসিনক্রোনাস কাজ, একশন লগিং, এবং একশন পরিবর্তন/প্রসেসিং করার জন্য ব্যবহৃত হয়। Redux Thunk এবং Redux Saga অ্যাসিনক্রোনাস একশনের জন্য জনপ্রিয় middleware, যখন redux-logger ডিবাগিংয়ের জন্য ব্যবহৃত হয়। Redux-এ middleware ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের কার্যকারিতা আরও প্রসারিত এবং নিয়ন্ত্রিত হয়।
Middleware রিডাক্সের একটি গুরুত্বপূর্ণ কনসেপ্ট, যা অ্যাকশনের প্রক্রিয়া পরিচালনার মাঝে অবস্থিত। এটি একশন ডিসপ্যাচ করার আগে, পরে অথবা সেগুলোর সাথে কিছু অতিরিক্ত লজিক বা আচরণ যোগ করতে সক্ষম। সহজভাবে, middleware হলো একটি ফাংশনাল মডিউল যা অ্যাকশনগুলোকে প্রক্রিয়াজাত করতে এবং স্টোরে তাদের পৌঁছানোর আগে কিছু কার্য সম্পাদন করতে ব্যবহৃত হয়।
Redux-এ মিডলওয়্যার ব্যবহৃত হয় অ্যাসিনক্রোনাস কাজ, লোগিং, একশন ফিল্টারিং, অথবা স্টেট পরিবর্তনের আগে কিছু লজিক প্রয়োগের জন্য। এটি স্টেট ম্যানেজমেন্ট ফ্লোতে এক্সটেনশন বা কাস্টমাইজেশন যোগ করতে সাহায্য করে।
Middleware কী?
Middleware হলো একটি ফাংশন বা একাধিক ফাংশনের সিরিজ, যা Redux স্টোরে পৌঁছানোর আগে বা স্টোর থেকে বের হওয়ার পরে একশনগুলোকে প্রক্রিয়াজাত করতে সাহায্য করে। এটি একটি ফাংশন হিসেবে কাজ করে, যা তিনটি উপাদান নিয়ে কাজ করে:
- Store's dispatch method – অ্যাকশন ডিসপ্যাচ করার জন্য।
- Store's getState method – অ্যাপ্লিকেশনের বর্তমান স্টেট জানার জন্য।
- Next function – পরবর্তী মডিউলে একশন পাস করার জন্য।
এটা একটি হাইয়ার-অর্ডার ফাংশন, যা dispatch, getState, এবং next আর্গুমেন্ট গ্রহণ করে। এটি স্টোরের একশনগুলোর উপর প্রভাব ফেলে এবং অ্যাকশনগুলোর জন্য এক্সটেনশন বা কাস্টম লজিক প্রয়োগ করতে সাহায্য করে।
Middleware কিভাবে কাজ করে?
Redux-এ মিডলওয়্যারকে store তৈরি করার সময় পাস করা হয়। এটি একশন ডিসপ্যাচ হওয়ার পূর্বে বা পরে একটি নির্দিষ্ট কাজ করতে ব্যবহৃত হয়। সাধারণত, মিডলওয়্যারগুলো Redux pipeline-এ অবস্থান করে, যা একশনগুলোর মধ্যে কিছু অতিরিক্ত আচরণ, যেমন লগিং, অ্যাসিনক্রোনাস একশন হ্যান্ডলিং, অথবা ইন্টারসেপ্টিং একশন করে।
মিডলওয়্যার তিনটি মূল ধাপে কাজ করতে পারে:
- একশন প্রক্রিয়া শুরু করার আগে – একশন ডিসপ্যাচ করার আগে কিছু কাজ করা, যেমন লগিং বা ভ্যালিডেশন।
- একশন প্রক্রিয়া চলাকালীন – একশন প্রক্রিয়া চলাকালীন সময়ে কিছু লজিক প্রয়োগ করা, যেমন অ্যাসিনক্রোনাস ফিচার।
- একশন প্রক্রিয়া সম্পন্ন হওয়ার পর – একশন প্রক্রিয়া সম্পন্ন হওয়ার পর, যেমন রেসপন্স পাওয়ার পরে একশন ফিল্টার বা ট্রান্সফর্ম করা।
Middleware ব্যবহারের প্রয়োজনীয়তা
অ্যাসিনক্রোনাস কাজের জন্য
Redux সাধারণত সিনক্রোনাস একশন ব্যবহৃত হলেও, অনেক সময় অ্যাসিনক্রোনাস কাজের (যেমন API কল, টাইমার, বা ডেটা ফেচ) জন্য একশন ডিসপ্যাচ করতে হয়। Redux তাতে সাহায্য করতে middleware ব্যবহার করা হয়, যেমন Redux Thunk বা Redux Saga।- Redux Thunk middleware একশন ক্রিয়েটরের মাধ্যমে অ্যাসিনক্রোনাস কাজ পরিচালনা করতে সহায়তা করে।
- Redux Saga middleware জেনারেটর ফাংশন ব্যবহার করে অ্যাসিনক্রোনাস কাজ এবং সাইড ইফেক্টগুলো ম্যানেজ করতে পারে।
উদাহরণ (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একটি অ্যাসিনক্রোনাস কাজ, যাdispatchব্যবহার করে একশন ডিসপ্যাচ করছে।
লগিং এবং ডিবাগিং
স্টেট পরিবর্তনের প্রতিটি পদক্ষেপ লগ করা বা ট্র্যাক করা গুরুত্বপূর্ণ হতে পারে, বিশেষত ডিবাগিং করার সময়। Redux Logger মিডলওয়্যার একটি উদাহরণ, যা একশন ডিসপ্যাচ, স্টেট পরিবর্তন এবং প্রিপ্রোসেসিংকে লগ করে।উদাহরণ (Redux Logger):
import logger from 'redux-logger'; const store = createStore( rootReducer, applyMiddleware(logger) );এখানে,
redux-loggerমিডলওয়্যার ব্যবহার করা হয়েছে, যা একশন ডিসপ্যাচ হওয়ার সময় লগ করবে এবং স্টেট আপডেট পরবর্তী অবস্থা প্রদর্শন করবে।
একশন ফিল্টারিং এবং পরিবর্তন
কিছু একশনকে প্রক্রিয়াজাত করার আগে ফিল্টার করা বা পরিবর্তন করা হতে পারে। যেমন, যদি একশনটি কিছু শর্ত পূরণ না করে, তাহলে তা নিষ্ক্রিয় করা। কিছু মিডলওয়্যার একশন ফিল্টার করতে বা তার আগে শর্ত যাচাই করতে ব্যবহৃত হয়।উদাহরণ (একশন ফিল্টারিং):
const actionFilterMiddleware = store => next => action => { if (action.type === 'BLOCK_ACTION') { // Block the action return; } return next(action); }; const store = createStore( rootReducer, applyMiddleware(actionFilterMiddleware) );এখানে,
actionFilterMiddlewareএকশন ব্লক করার শর্ত প্রদান করছে।
স্টেট বা একশনের ট্রান্সফরমেশন
একশন বা স্টেট কিছু সময় পরে পরিবর্তন করা হতে পারে। যেমন, একশনটির কিছু ডেটা ট্রান্সফর্ম করা, বা কিছু অ্যাডিশনাল তথ্য যোগ করা। মিডলওয়্যার এই পরিবর্তন বা ট্রান্সফরমেশন করার কাজ করতে পারে।উদাহরণ:
const transformActionMiddleware = store => next => action => { if (action.type === 'ADD_ITEM') { action.payload = action.payload.toUpperCase(); } return next(action); }; const store = createStore( rootReducer, applyMiddleware(transformActionMiddleware) );এখানে,
transformActionMiddlewareএকশনটির পে-লোডে ট্রান্সফরমেশন করছে।
Redux Middleware এর কিছু জনপ্রিয় উদাহরণ:
- Redux Thunk: অ্যাসিনক্রোনাস একশন পরিচালনার জন্য।
- Redux Saga: সাইড ইফেক্ট পরিচালনা এবং অ্যাসিনক্রোনাস কাজের জন্য।
- Redux Logger: একশন এবং স্টেট পরিবর্তন লগ করার জন্য।
- Redux DevTools: ডেভেলপার টুলস যেটি স্টোর এবং একশন ট্র্যাক করার জন্য ব্যবহৃত হয়।
- Redux Promise Middleware: প্রমিস ভিত্তিক অ্যাসিনক্রোনাস কাজ পরিচালনার জন্য।
সারাংশ
Middleware Redux-এ একটি গুরুত্বপূর্ণ কনসেপ্ট, যা একশন প্রক্রিয়া করার মাঝে অতিরিক্ত লজিক প্রয়োগ করতে সহায়তা করে। এটি অ্যাসিনক্রোনাস কাজ পরিচালনা, লগিং, একশন ফিল্টারিং, এবং স্টেট পরিবর্তনের ট্রান্সফরমেশন প্রক্রিয়া সহজতর করে। Redux-এ মিডলওয়্যার ব্যবহৃত হয় কোডকে আরও স্কেলেবল, পরিষ্কার এবং কার্যকরী করার জন্য। বিভিন্ন ধরনের মিডলওয়্যার, যেমন Redux Thunk, Redux Logger, এবং Redux Saga, নির্দিষ্ট কাজের জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশনকে আরও ভালোভাবে ম্যানেজ করতে সাহায্য করে।
Middleware Redux-এ একটি অত্যন্ত গুরুত্বপূর্ণ কনসেপ্ট, যা অ্যাকশনের মধ্যে প্রক্রিয়া যুক্ত করতে ব্যবহৃত হয়। এটি রিডাক্স স্টোরের সাথে যোগাযোগ করতে সাহায্য করে এবং একশন ডিসপ্যাচ হওয়ার আগে বা পরে কোনো নির্দিষ্ট লজিক বা কার্যকলাপ সম্পাদন করতে পারে। এটি বিশেষভাবে অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডলিং, লগিং, একশন মডিফিকেশন, অথবা অ্যাকশন ডিসপ্যাচের প্রবাহ নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়।
Redux এর কিছু built-in middleware আছে যা ডিফল্টভাবে ব্যবহার করা যায়। এগুলি হল:
- Redux Thunk
- Redux DevTools
এগুলির মধ্যে সবচেয়ে সাধারণ এবং জনপ্রিয় Redux Thunk, যা অ্যাসিনক্রোনাস অ্যাকশন পরিচালনা করার জন্য ব্যবহৃত হয়। চলুন, এগুলি বিস্তারিতভাবে দেখি।
১. Redux Thunk
Redux Thunk হল একটি middleware যা অ্যাসিনক্রোনাস অ্যাকশন ডিসপ্যাচ করার জন্য ব্যবহৃত হয়। এটি বিশেষভাবে গুরুত্বপূর্ণ যখন আপনাকে অ্যাকশনের মধ্যে ডাটা ফেচিং বা API কল করতে হয়।
Redux Thunk ব্যবহার করে, আপনি সাধারণ অ্যাকশন অবজেক্টের পরিবর্তে একটি ফাংশন ডিসপ্যাচ করতে পারবেন। এই ফাংশনটি দুইটি আর্গুমেন্ট পায়:
- dispatch - অ্যাকশন ডিসপ্যাচ করার জন্য।
- getState - অ্যাপ্লিকেশনের বর্তমান স্টেট অ্যাক্সেস করার জন্য।
Redux Thunk এর সাহায্যে আপনি অ্যাসিনক্রোনাস কোড লিখতে পারেন, যেমন:
- API কল
- টাইমার ওয়েট
- অন্যান্য অ্যাসিনক্রোনাস কার্যক্রম
Redux Thunk এর উদাহরণ:
// Redux Thunk Example
// Action Creator using Thunk for asynchronous behavior
const fetchData = () => {
return function(dispatch, getState) {
dispatch({ type: 'FETCH_DATA_START' });
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
});
};
};
এখানে, fetchData একটি ফাংশন যা dispatch এবং getState ফাংশন গ্রহণ করে। এটি প্রথমে একটি FETCH_DATA_START অ্যাকশন ডিসপ্যাচ করে, তারপর API থেকে ডেটা ফেচ করে এবং সাফল্যের ভিত্তিতে FETCH_DATA_SUCCESS বা ত্রুটি ঘটলে FETCH_DATA_FAILURE ডিসপ্যাচ করে।
Redux Store এ Thunk Middleware যুক্ত করা:
Redux Thunk ব্যবহার করতে হলে, আপনাকে applyMiddleware() ফাংশন ব্যবহার করে এটি আপনার Redux স্টোরে যুক্ত করতে হবে।
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
rootReducer, // rootReducer হল আপনার রিডিউসার
applyMiddleware(thunk) // Thunk middleware যুক্ত করা
);
২. Redux DevTools
Redux DevTools একটি গুরুত্বপূর্ণ টুল যা ডেভেলপারদের তাদের Redux অ্যাপ্লিকেশন ট্র্যাক এবং ডিবাগ করতে সাহায্য করে। এটি স্টোরের স্টেট পরিবর্তনগুলো দেখতে, অ্যাকশন হ্যান্ডলিং পর্যবেক্ষণ করতে এবং আগের স্টেটের সাথে তুলনা করতে সহায়ক। Redux DevTools ব্রাউজার এক্সটেনশন হিসেবে ইনস্টল করা যায় এবং এটি Redux অ্যাপ্লিকেশনের ডিবাগিং এবং ত্রুটি শনাক্তকরণ আরও সহজ করে।
Redux DevTools সাধারণত প্রোডাকশন কোডের বাইরে ডিবাগিংয়ের জন্য ব্যবহৃত হয়, তবে এটি ডেভেলপমেন্ট পরিবেশে বেশ উপকারী।
Redux DevTools ব্যবহার:
Redux DevTools সাধারণত স্টোরে এইভাবে যুক্ত করা হয়:
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
এই কোডে window.__REDUX_DEVTOOLS_EXTENSION__ দ্বারা ডেভেলপার টুলসের জন্য একটি এক্সটেনশন ব্যবহার করা হচ্ছে। এটি ডেভেলপমেন্ট মোডে Redux স্টোরের স্টেট, একশন এবং রিডিউসার ট্র্যাক করার সুবিধা দেয়।
Redux এর জন্য অন্যান্য Middleware
যদিও Redux Thunk এবং Redux DevTools সবচেয়ে জনপ্রিয় এবং ব্যবহৃত, তবে কিছু অন্য middleware রয়েছে যেগুলি Redux এর সাথে ব্যবহার করা যেতে পারে। কিছু উদাহরণ হলো:
- Redux Saga: এটি অ্যাসিনক্রোনাস কার্যক্রম পরিচালনা করার একটি বিকল্প পদ্ধতি। এটি আরো প্রেডিক্টেবল এবং কনকারেন্ট অ্যাসিনক্রোনাস অপারেশন সমর্থন করে।
- Redux Logger: এটি একটি লাইটওয়েট middleware যা Redux স্টোরের পরিবর্তনগুলো লোগ করতে ব্যবহৃত হয়। এটি ডেভেলপারদের একশন এবং স্টেট পরিবর্তন পর্যবেক্ষণ করতে সহায়ক।
- Redux Persist: এটি Redux স্টোরের স্টেটকে লোকাল স্টোরেজে (যেমন ব্রাউজার স্টোরেজ) সংরক্ষণ করার জন্য ব্যবহৃত হয়, যাতে অ্যাপ্লিকেশন পুনরায় লোড করার পর আগের স্টেট পুনরুদ্ধার করা যায়।
সারাংশ
Redux এর জন্য Built-in Middleware অ্যাপ্লিকেশনকে আরো কার্যকর এবং সুসংগঠিত করে তোলে। সবচেয়ে জনপ্রিয় middleware গুলি হল:
- Redux Thunk: এটি অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়, যেখানে আপনি একশন ক্রিয়েটর হিসেবে ফাংশন ব্যবহার করতে পারেন।
- Redux DevTools: এটি একটি ডেভেলপার টুল যা Redux স্টোরের কার্যক্রম পর্যবেক্ষণ করতে সহায়তা করে এবং ডিবাগিং সহজ করে তোলে।
এছাড়া, Redux Saga, Redux Logger এবং Redux Persist এর মতো অন্যান্য 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 স্টোরে মিডলওয়্যার যোগ করা হয়।
Redux-এ Asynchronous Actions (যেমন, API কল) হ্যান্ডল করার জন্য সাধারণত Middleware ব্যবহার করা হয়। Redux স্টোরের মধ্যে সব একশনই সিনক্রোনাস হয়, কিন্তু বাস্তব জীবনে অনেক সময় আমাদের অ্যাসিনক্রোনাস একশন (যেমন, ডেটা লোড, ফর্ম সাবমিট) পরিচালনা করতে হয়। Redux Middleware, বিশেষত Redux Thunk এবং Redux Saga, এই কাজগুলো সহজভাবে সম্পাদন করতে সহায়তা করে।
Middleware কী?
Middleware হল একটি ফাংশন যা Redux স্টোরের মধ্যে একশন ডিসপ্যাচ হওয়ার আগে অথবা পরে ইন্টারসেপ্ট করে। এটি একশনের উপর নির্দিষ্ট লজিক বা কার্যকারিতা প্রয়োগ করতে পারে, যেমন অ্যাসিনক্রোনাস কাজের জন্য একশন ক্রিয়েটরকে পরিবর্তন করা।
Asynchronous Actions এর সমস্যা
Redux-এ একশন শুধুমাত্র সিনক্রোনাস হতে পারে, কিন্তু অনেক সময় আমাদের API কল বা টাইম-আউট এর মতো অ্যাসিনক্রোনাস কাজ করতে হয়। এর জন্য Redux এর মধ্যে একশনগুলিকে ফাঁকি দেওয়ার প্রয়োজন হয়, যাতে তারা একসাথে স্টেট পরিবর্তন করতে পারে।
যেহেতু Redux স্টোরে শুধুমাত্র সাধারণ একশনই পৌঁছায়, সেজন্য অ্যাসিনক্রোনাস একশনগুলিকে বিশেষভাবে হ্যান্ডল করার জন্য Middleware ব্যবহৃত হয়।
Redux Thunk: Asynchronous Actions হ্যান্ডল করার জন্য
Redux Thunk হল একটি জনপ্রিয় Middleware যা অ্যাসিনক্রোনাস একশনগুলোকে Redux স্টোরে পাঠানোর জন্য ব্যবহৃত হয়। এটি আমাদের Action Creators-কে ফাংশন হিসেবে লিখতে সাহায্য করে, যাতে অ্যাসিনক্রোনাস কাজ করতে পারে।
Redux Thunk middleware একশন ডিসপ্যাচ করার জন্য একটি ফাংশনকে অনুমতি দেয়। এই ফাংশনটি dispatch এবং getState নামক দুটি আর্গুমেন্ট গ্রহণ করে। এর মাধ্যমে, আমরা অ্যাসিনক্রোনাস কাজগুলো পরিচালনা করতে পারি এবং তারপরে একশন ডিসপ্যাচ করতে পারি।
Redux Thunk ব্যবহার করার উদাহরণ
১. Redux Thunk ইন্সটল করা
প্রথমে, Redux Thunk ইন্সটল করতে হবে:
npm install redux-thunk
২. Middleware হিসেবে Thunk ব্যবহার করা
Redux store তৈরির সময় Thunk middleware যোগ করতে হয়:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// Reducer
function rootReducer(state = { todos: [] }, action) {
switch (action.type) {
case 'FETCH_TODOS':
return { ...state, todos: action.payload };
default:
return state;
}
}
// Store তৈরি
const store = createStore(rootReducer, applyMiddleware(thunk));
এখানে, আমরা applyMiddleware(thunk) ব্যবহার করে Redux store-এ Thunk middleware যোগ করেছি।
৩. Action Creator with Thunk (Asynchronous Action)
এখন, আসুন দেখি কিভাবে অ্যাসিনক্রোনাস একশন ডিসপ্যাচ করা যায় Redux Thunk এর মাধ্যমে:
// Action creator with Thunk (Asynchronous action)
function fetchTodos() {
return function(dispatch) {
dispatch({ type: 'FETCH_TODOS_START' });
fetch('/api/todos') // API কল
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_TODOS_FAILURE', payload: error });
});
};
}
এখানে:
fetchTodosএকটি Thunk action creator, যা একটি ফাংশন ফেরত দেয়।- প্রথমে একটি
FETCH_TODOS_STARTএকশন ডিসপ্যাচ করা হয়, যেটি API কল শুরু হওয়ার সংকেত দেয়। - তারপর, API কল করা হয় এবং সাফল্য বা ব্যর্থতার ভিত্তিতে যথাক্রমে
FETCH_TODOS_SUCCESSবাFETCH_TODOS_FAILUREএকশন ডিসপ্যাচ করা হয়।
৪. Dispatching Asynchronous Action
store.dispatch(fetchTodos());
এখন, আপনি যখন fetchTodos ফাংশনটি ডিসপ্যাচ করবেন, এটি API কল করবে এবং একশন ডিসপ্যাচ করবে।
Reducer তে Asynchronous Actions হ্যান্ডল করা
একশন ডিসপ্যাচ হওয়ার পর, রিডিউসার সেই একশনগুলিকে হ্যান্ডল করে স্টেট পরিবর্তন করবে।
function rootReducer(state = { todos: [], loading: false, error: null }, action) {
switch (action.type) {
case 'FETCH_TODOS_START':
return { ...state, loading: true };
case 'FETCH_TODOS_SUCCESS':
return { ...state, loading: false, todos: action.payload };
case 'FETCH_TODOS_FAILURE':
return { ...state, loading: false, error: action.payload };
default:
return state;
}
}
এখানে:
FETCH_TODOS_START: লোডিং স্টেট পরিবর্তন করে।FETCH_TODOS_SUCCESS: সফলভাবে ডেটা পাওয়ার পর, স্টেট আপডেট করে।FETCH_TODOS_FAILURE: যদি কোনো ত্রুটি ঘটে, তাহলে ত্রুটি স্টেট আপডেট করে।
Redux Saga: আরো শক্তিশালী Middleware
Redux Saga একটি শক্তিশালী Middleware যা অ্যাসিনক্রোনাস কাজগুলো সিজেন (Saga) ব্যবহার করে হ্যান্ডল করে। এটি থাঙ্কের চেয়ে আরও উন্নত এবং আরও জটিল অ্যাসিনক্রোনাস লজিক পরিচালনা করতে সক্ষম। তবে Redux Thunk ছোট অ্যাপ্লিকেশনে সাধারণত যথেষ্ট, এবং এটি আরও সহজ ব্যবহারযোগ্য।
সারাংশ
Redux Middleware বিশেষভাবে Redux Thunk অ্যাসিনক্রোনাস একশন হ্যান্ডল করার জন্য ব্যবহৃত হয়। Thunk, অ্যাসিনক্রোনাস কাজের জন্য action creators কে ফাংশন হিসেবে ফেরত দিতে সক্ষম, যা পরে dispatch() ব্যবহার করে একশন ডিসপ্যাচ করে। এর মাধ্যমে, API কলের মতো কাজগুলো সহজভাবে পরিচালিত হয়। Redux Thunk অ্যাসিনক্রোনাস কাজের জন্য সাধারণ এবং জনপ্রিয় সমাধান হলেও, আরও জটিল সিজেন-ভিত্তিক লজিক পরিচালনার জন্য Redux Saga ব্যবহার করা হয়।
Read more
