Redux এর Store হল অ্যাপ্লিকেশনের কেন্দ্রীয় জায়গা যেখানে সমস্ত স্টেট সংরক্ষিত থাকে। স্টোরের মাধ্যমে অ্যাপ্লিকেশনের স্টেট পরিবর্তন এবং অ্যাক্সেস করা হয়। Redux এর store তৈরি করার জন্য আপনাকে createStore() ফাংশন ব্যবহার করতে হয়, যা রিডিউসার এবং অন্যান্য কনফিগারেশন নেয়।
Redux স্টোরের মাধ্যমে স্টেট একক স্থান থেকে পরিচালনা করা হয়, যা অ্যাপ্লিকেশনকে স্কেলেবল এবং সুসংগঠিত রাখে।
স্টোর তৈরি করার প্রক্রিয়া
স্টোর তৈরি করতে হলে, আপনাকে প্রথমে একটি রিডিউসার (Reducer) প্রয়োজন। রিডিউসার হল একটি ফাংশন যা অ্যাকশন এবং পূর্ববর্তী স্টেটের উপর ভিত্তি করে নতুন স্টেট তৈরি করে। এরপর, সেই রিডিউসার দিয়ে স্টোর তৈরি করা হয়।
১. রিডিউসার (Reducer) তৈরি করা
রিডিউসার একটি pure function হিসেবে কাজ করে, যার মানে হল যে এটি একে অপরের উপর নির্ভরশীল নয় এবং একটি নির্দিষ্ট ইনপুটের জন্য একই আউটপুট প্রদান করে। রিডিউসার সাধারণত স্টেট এবং অ্যাকশন গ্রহণ করে এবং একটি নতুন স্টেট রিটার্ন করে।
উদাহরণ:
// রিডিউসার তৈরি করা
const initialState = {
counter: 0
};
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return {
...state,
counter: state.counter + 1
};
case 'DECREMENT':
return {
...state,
counter: state.counter - 1
};
default:
return state;
}
}
এখানে, counterReducer স্টেট এবং একশন নিয়ে কাজ করে। যদি একশনটির টাইপ 'INCREMENT' হয়, তবে এটি স্টেটের counter প্রোপার্টি ১ বাড়িয়ে নতুন স্টেট রিটার্ন করবে। অন্যথায়, 'DECREMENT' টাইপ হলে এটি counter কমাবে।
২. স্টোর তৈরি করা
এখন যে রিডিউসার তৈরি করেছেন তা দিয়ে স্টোর তৈরি করতে হবে। createStore() ফাংশনটি রিডিউসার এবং অন্যান্য কনফিগারেশন নেয় এবং একটি Redux স্টোর রিটার্ন করে।
উদাহরণ:
import { createStore } from 'redux';
// স্টোর তৈরি করা
const store = createStore(counterReducer);
// স্টোরের বর্তমান স্টেট দেখানো
console.log(store.getState()); // { counter: 0 }
এখানে, createStore() ফাংশনটি counterReducer রিডিউসার নেয় এবং একটি Redux স্টোর তৈরি করে।
৩. স্টোরের পরিবর্তন ট্র্যাক করা
স্টোরে স্টেট পরিবর্তন হলে, আপনি subscribe() ফাংশন ব্যবহার করে সেই পরিবর্তনগুলো ট্র্যাক করতে পারেন। এটি একটি ফাংশন গ্রহণ করে, যা স্টোরের স্টেট পরিবর্তন হলে ট্রিগার হবে।
উদাহরণ:
// স্টোরের পরিবর্তন শোনার জন্য subscribe করা
store.subscribe(() => {
console.log('State updated:', store.getState());
});
এখন, যখনই স্টোরে স্টেট পরিবর্তন হবে, এই subscribe ফাংশনটি ট্রিগার হবে এবং স্টেটের নতুন মান কনসোলে দেখানো হবে।
৪. স্টোরে একশন ডিসপ্যাচ করা
স্টোরের স্টেট পরিবর্তন করতে হলে আপনাকে dispatch() ফাংশন ব্যবহার করে একশন পাঠাতে হবে। একশন হচ্ছে একটি সাধারণ অবজেক্ট, যার মধ্যে type থাকে এবং প্রাসঙ্গিক তথ্য (payload) থাকতে পারে।
উদাহরণ:
// ইনক্রিমেন্ট একশন ডিসপ্যাচ করা
store.dispatch({ type: 'INCREMENT' });
// ডিক্রিমেন্ট একশন ডিসপ্যাচ করা
store.dispatch({ type: 'DECREMENT' });
এখন, আপনি যখনই dispatch() ফাংশন দিয়ে একশন পাঠাবেন, তখন রিডিউসার সেই একশন গ্রহণ করে স্টেট আপডেট করবে এবং নতুন স্টেট তৈরি হবে।
স্টোরের সাথে কাজ করার পূর্ণ উদাহরণ
এখন, একসাথে স্টোর তৈরি করা, একশন ডিসপ্যাচ করা এবং স্টোরের পরিবর্তন ট্র্যাক করা দেখে নেওয়া যাক:
import { createStore } from 'redux';
// রিডিউসার
const initialState = {
counter: 0
};
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return {
...state,
counter: state.counter + 1
};
case 'DECREMENT':
return {
...state,
counter: state.counter - 1
};
default:
return state;
}
}
// স্টোর তৈরি করা
const store = createStore(counterReducer);
// স্টোরের পরিবর্তন ট্র্যাক করা
store.subscribe(() => {
console.log('State updated:', store.getState());
});
// একশন ডিসপ্যাচ করা
store.dispatch({ type: 'INCREMENT' }); // State updated: { counter: 1 }
store.dispatch({ type: 'INCREMENT' }); // State updated: { counter: 2 }
store.dispatch({ type: 'DECREMENT' }); // State updated: { counter: 1 }
এখানে:
- প্রথমে স্টোর তৈরি করা হয়েছে
counterReducerব্যবহার করে। - পরে স্টোরে স্টেট পরিবর্তন ট্র্যাক করা হয়েছে
subscribe()ফাংশনের মাধ্যমে। - অবশেষে, একশন ডিসপ্যাচ করা হয়েছে স্টেট পরিবর্তন করার জন্য।
সারাংশ
Redux Store তৈরি করতে আপনাকে প্রথমে একটি রিডিউসার ফাংশন তৈরি করতে হয়, যা স্টেট এবং অ্যাকশনের ভিত্তিতে নতুন স্টেট রিটার্ন করবে। তারপরে, createStore() ফাংশন ব্যবহার করে স্টোর তৈরি করা হয়। একবার স্টোর তৈরি হলে, আপনি dispatch() ফাংশন দিয়ে স্টোরে একশন পাঠাতে পারেন এবং subscribe() ব্যবহার করে স্টোরের পরিবর্তন ট্র্যাক করতে পারেন। Redux স্টোর স্টেটের কেন্দ্রীয় স্থান হিসেবে কাজ করে এবং সমস্ত স্টেট এখানে সংরক্ষিত থাকে।
Redux Store হলো Redux স্টেট ম্যানেজমেন্ট সিস্টেমের কেন্দ্রীয় স্থান যেখানে অ্যাপ্লিকেশনের সমস্ত স্টেট (State) সংরক্ষিত থাকে। এটি Redux-এর মূল উপাদান, কারণ স্টোরের মাধ্যমে স্টেটের উপর পরিবর্তন আনা এবং সেই স্টেট অ্যাপ্লিকেশনের বিভিন্ন অংশে শেয়ার করা হয়। Redux স্টোর একটি কেন্দ্রীভূত স্টোর ধারণ করে, যা অ্যাপ্লিকেশনের সমস্ত ডেটা একসাথে সংরক্ষণ করে, ফলে অ্যাপ্লিকেশনটির স্টেট ম্যানেজমেন্ট সহজ এবং ট্র্যাকযোগ্য হয়।
Redux স্টোরের মাধ্যমে অ্যাপ্লিকেশনটির স্টেট একমাত্র স্থান থেকে ম্যানেজ করা যায়, যা স্টেটের সেন্ট্রালাইজেশন নিশ্চিত করে। এটি অ্যাপ্লিকেশনটির স্কেলাবিলিটি এবং ডিবাগিং সুবিধা বাড়ায়, কারণ স্টেটের সমস্ত পরিবর্তন শুধুমাত্র এক পদ্ধতির মাধ্যমে করা হয় এবং সমস্ত পরিবর্তন ট্র্যাক করা যায়।
Redux Store এর গুরুত্ব
Redux স্টোরের গুরুত্ব অনেক কারণেই বিশেষ:
- কেন্দ্রীভূত স্টেট ম্যানেজমেন্ট (Centralized State Management): Redux স্টোরের মাধ্যমে অ্যাপ্লিকেশনের সমস্ত স্টেট একটি সেন্ট্রালাইজড স্থানে রাখা হয়। এটি অ্যাপ্লিকেশনের সমস্ত অংশকে একই স্টেট শেয়ার করার সুযোগ দেয়। যেমন, বিভিন্ন UI কম্পোনেন্ট বা মডিউল একে অপরের স্টেট শেয়ার করতে পারে, যা কোডের পুনঃব্যবহারযোগ্যতা এবং স্থিতিশীলতা বৃদ্ধি করে।
- স্টেটের পূর্বানুমানযোগ্যতা (Predictable State): Redux স্টোরে থাকা স্টেটের সমস্ত পরিবর্তন পূর্বানুমানযোগ্য, কারণ স্টেট শুধুমাত্র একশন (Action) এর মাধ্যমে পরিবর্তিত হয় এবং রিডিউসার (Reducer) স্টেট পরিবর্তনের জন্য একমাত্র উৎস। এই কাঠামো অ্যাপ্লিকেশনকে অনেক বেশি ডিবাগযোগ্য এবং টেস্টযোগ্য করে তোলে।
- একমুখী ডেটা ফ্লো (Unidirectional Data Flow): Redux স্টোরে ডেটা একমুখী ভাবে প্রবাহিত হয়, অর্থাৎ স্টেট প্রথমে একশন ডিসপ্যাচের মাধ্যমে রিডিউসারে যায়, তারপর স্টোরে নতুন স্টেট সংরক্ষিত হয়। এই একমুখী ডেটা ফ্লো ডেভেলপারদের জন্য অ্যাপ্লিকেশনটির আচরণ পূর্বানুমানযোগ্য এবং সহজে ট্র্যাকযোগ্য করে তোলে।
- কম্পোনেন্ট রি-রেন্ডার এবং স্টেট শেয়ারিং (Component Re-rendering and State Sharing): Redux স্টোরের মাধ্যমে যেকোনো কম্পোনেন্ট বা মডিউল স্টেটের পরিবর্তনের প্রতি সাবস্ক্রাইব করতে পারে। স্টোরের স্টেট পরিবর্তিত হলে, সেই পরিবর্তন UI কম্পোনেন্টগুলোতে প্রতিফলিত হয়। ফলে, ডেটার প্রতি নির্ভরশীল কম্পোনেন্টগুলির রি-রেন্ডারিং সহজে করা যায়।
- অ্যাসিনক্রোনাস ডেটা হ্যান্ডলিং (Asynchronous Data Handling): Redux স্টোর অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডলিংয়ের জন্য উপযোগী। আপনি যদি অ্যাসিনক্রোনাস ডেটা ফেচ করতে চান, তবে Redux Thunk বা Redux Saga এর মতো middleware ব্যবহার করে, Redux স্টোরে অ্যাসিনক্রোনাস অ্যাকশন ডিসপ্যাচ এবং ম্যানেজ করা সম্ভব। এটি API কল বা অন্য কোনো দীর্ঘ-running অপারেশনকে সঠিকভাবে পরিচালনা করতে সহায়ক।
- স্টেট অপরিবর্তনীয়তা (State Immutability): Redux স্টোরের স্টেট কখনো সরাসরি পরিবর্তিত হয় না। পরিবর্তন করতে হলে, স্টেটের একটি নতুন কপি তৈরি করতে হয়। এই স্টেট অপরিবর্তনীয়তা (immutable state) বজায় রাখা অ্যাপ্লিকেশনটির প্রেডিক্টেবিলিটি ও নিরাপত্তা বাড়ায়, কারণ আগের অবস্থার উপর কোনো প্রভাব না ফেলে স্টেট নতুনভাবে তৈরি হয়।
- ডিবাগিং সুবিধা (Debugging Support): Redux স্টোরের সাথে ব্যবহৃত Redux DevTools ডেভেলপারদের জন্য অত্যন্ত সহায়ক। এই টুলের মাধ্যমে আপনি স্টোরের পরিবর্তন ট্র্যাক করতে পারেন, পূর্ববর্তী স্টেট দেখতে পারেন, এবং একশন ডিসপ্যাচের ট্রেস করতে পারেন। এটি ডিবাগিং এবং স্টেট ম্যানেজমেন্টকে অনেক সহজ করে দেয়।
Redux Store কিভাবে কাজ করে?
Redux স্টোরের কাজের ধাপগুলি সাধারণত নিম্নরূপ:
স্টোর তৈরি করা (Creating the Store): প্রথমে, Redux স্টোর তৈরি করতে হয়, যা রিডিউসার এবং অন্যান্য কনফিগারেশন গ্রহণ করে। স্টোরটি অ্যাপ্লিকেশনের কেন্দ্রীয় স্থান হিসেবে কাজ করে এবং এতে স্টেট সংরক্ষিত থাকে।
উদাহরণ:
import { createStore } from 'redux'; const store = createStore(rootReducer);স্টেট পরিবর্তন (State Change): স্টেট পরিবর্তন করতে হলে, একটি একশন (Action) ডিসপ্যাচ করতে হয়। একশনটি রিডিউসারের কাছে যাবে এবং রিডিউসার বর্তমান স্টেট ও একশন দেখে একটি নতুন স্টেট তৈরি করবে।
উদাহরণ:
const action = { type: 'INCREMENT' }; store.dispatch(action);স্টেট সাবস্ক্রাইব করা (Subscribing to State):
store.subscribe()ব্যবহার করে, কম্পোনেন্ট বা অন্যান্য অংশ স্টোরের স্টেট পরিবর্তন সম্পর্কে অবহিত হতে পারে। এটি একটি callback ফাংশন নেয়, যা স্টেট পরিবর্তন হওয়ার পর ট্রিগার হয়।উদাহরণ:
store.subscribe(() => { console.log(store.getState()); });স্টেট রিডিং (Reading the State):
store.getState()ফাংশন ব্যবহার করে, আপনি বর্তমান স্টেট অ্যাক্সেস করতে পারেন।উদাহরণ:
const currentState = store.getState();
Redux Store এর সাথে Middleware ব্যবহারের গুরুত্ব
Redux স্টোরের সাথে middleware ব্যবহার করলে, অ্যাপ্লিকেশনটির কার্যক্রম আরো শক্তিশালী এবং সহায়ক হয়ে ওঠে। সাধারণত, Redux Thunk বা Redux Saga এর মতো middleware অ্যাসিনক্রোনাস কাজ যেমন API কল বা টাইমিং ইভেন্টের জন্য ব্যবহার করা হয়। Middleware স্টোরের স্টেট আপডেট এবং একশন ডিসপ্যাচের প্রক্রিয়াকে কাস্টমাইজ করতে সহায়তা করে।
উদাহরণ:
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
const store = createStore(rootReducer, applyMiddleware(thunk));
সারাংশ
Redux Store হল Redux স্টেট ম্যানেজমেন্ট সিস্টেমের কেন্দ্রীয় অংশ, যা অ্যাপ্লিকেশনের সমস্ত স্টেট ধারণ করে এবং তা পরিচালনা করে। Redux স্টোরের মাধ্যমে অ্যাপ্লিকেশনের স্টেট সেন্ট্রালাইজড, পূর্বানুমানযোগ্য এবং ডিবাগযোগ্য হয়ে ওঠে। একমুখী ডেটা ফ্লো এবং স্টেট অপরিবর্তনীয়তার মতো বৈশিষ্ট্যগুলি অ্যাপ্লিকেশনের কোডিংকে সহজ এবং মেইনটেইনেবল রাখে। Redux স্টোর অ্যাসিনক্রোনাস অ্যাকশন হ্যান্ডলিং এবং ডেভেলপার টুলসের মাধ্যমে ডিবাগিং সুবিধা প্রদান করে, যা প্রোজেক্টের স্কেলেবিলিটি এবং ডেভেলপমেন্ট প্রক্রিয়াকে আরও উন্নত করে তোলে।
Redux-এ স্টোর (Store) হলো এমন একটি জায়গা যেখানে অ্যাপ্লিকেশনের সমস্ত স্টেট ধারণ করা হয়। স্টোর তৈরি এবং কনফিগার করা Redux অ্যাপ্লিকেশনের মূল স্তম্ভগুলোর একটি, কারণ এর মাধ্যমে পুরো অ্যাপ্লিকেশনের স্টেট পরিচালনা করা হয়। স্টোর তৈরি করার জন্য createStore ফাংশন এবং combineReducers এর মতো টুলস ব্যবহার করা হয়। একবার স্টোর তৈরি হয়ে গেলে, এটিতে রিডিউসার (Reducers) এবং মিডলওয়্যার (Middleware) যুক্ত করা যায়।
এখানে আমরা দেখবো কিভাবে Redux স্টোর তৈরি এবং কনফিগার করা যায়।
স্টোর তৈরি করার প্রাথমিক ধাপ
Redux স্টোর তৈরি করার জন্য প্রধানত দুটি উপাদান প্রয়োজন: স্টেট (State) এবং রিডিউসার (Reducer)। রিডিউসার স্টেট পরিবর্তন করে এবং স্টেটের নতুন কপি তৈরি করে।
স্টোর তৈরি করার জন্য সাধারণ পদ্ধতি:
- রিডিউসার তৈরি করা (Creating a Reducer)
প্রথমে আপনাকে একটি রিডিউসার তৈরি করতে হবে। রিডিউসার ফাংশনটি অ্যাকশন এবং পূর্ববর্তী স্টেট গ্রহণ করে এবং একটি নতুন স্টেট রিটার্ন করে। - স্টোর তৈরি করা (Creating the Store)
তারপর createStore ফাংশন ব্যবহার করে স্টোর তৈরি করতে হবে। এখানে আমরা রিডিউসার পাস করবো যা স্টেট পরিবর্তন করবে। - স্টোরে সাবস্ক্রাইব করা (Subscribing to the Store)
স্টোরে কোন পরিবর্তন হলে অ্যাপ্লিকেশনকে অবহিত করতেstore.subscribe()ব্যবহার করা হয়।
স্টোর তৈরি করার উদাহরণ:
import { createStore } from 'redux';
// ১. রিডিউসার তৈরি করা
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;
}
}
// ২. স্টোর তৈরি করা
const store = createStore(counterReducer);
// ৩. স্টোরে সাবস্ক্রাইব করা
store.subscribe(() => {
console.log('State updated:', store.getState());
});
// ৪. একশন ডিসপ্যাচ করা
store.dispatch({ type: 'INCREMENT' }); // স্টেট হবে { counter: 1 }
store.dispatch({ type: 'INCREMENT' }); // স্টেট হবে { counter: 2 }
store.dispatch({ type: 'DECREMENT' }); // স্টেট হবে { counter: 1 }
এখানে:
- counterReducer একটি রিডিউসার যা স্টেটের
counterভ্যালু বাড়াতে বা কমাতে পারে। - createStore(counterReducer) ব্যবহার করে আমরা স্টোর তৈরি করেছি।
- store.subscribe() দিয়ে স্টোরের পরিবর্তন সম্পর্কে অবহিত হওয়ার ব্যবস্থা করেছি।
- store.dispatch() ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা হয়েছে।
combineReducers ব্যবহার করা
কখনও কখনও একটি অ্যাপ্লিকেশনে একাধিক রিডিউসার থাকতে পারে। এই ক্ষেত্রে, আমরা combineReducers ফাংশন ব্যবহার করি, যা একাধিক রিডিউসারকে একটি রিডিউসারে পরিণত করে।
combineReducers এর উদাহরণ:
import { createStore, combineReducers } from 'redux';
// ১. প্রথম রিডিউসার
function counterReducer(state = { counter: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
default:
return state;
}
}
// ২. দ্বিতীয় রিডিউসার
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}
// ৩. একাধিক রিডিউসারকে একত্রিত করা
const rootReducer = combineReducers({
counter: counterReducer,
todos: todosReducer
});
// ৪. স্টোর তৈরি করা
const store = createStore(rootReducer);
// ৫. স্টোরে সাবস্ক্রাইব করা
store.subscribe(() => {
console.log('State updated:', store.getState());
});
// ৬. একশন ডিসপ্যাচ করা
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' });
এখানে:
- combineReducers ব্যবহার করে
counterReducerএবংtodosReducerদুটি রিডিউসার একত্রিত করা হয়েছে। store.getState()স্টোরের সমস্ত স্টেটের মান রিটার্ন করবে, যেখানেcounterএবংtodosদুটি আলাদা স্টেট থাকবে।
স্টোর কনফিগারেশন: Middleware
Redux স্টোরের সাথে middleware ব্যবহার করা হয় যাতে অ্যাসিনক্রোনাস অ্যাকশন, লগিং, বা অন্যান্য কাস্টম লজিক যোগ করা যায়। Redux middleware হিসেবে Redux Thunk বা Redux Saga ব্যবহার করা হয়, যা অ্যাসিনক্রোনাস অ্যাকশন পরিচালনা করতে সাহায্য করে।
Redux Thunk কনফিগার করা:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// রিডিউসার
function rootReducer(state = { counter: 0 }, action) {
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
default:
return state;
}
}
// স্টোর তৈরি করা, middleware সহ
const store = createStore(rootReducer, applyMiddleware(thunk));
// অ্যাসিনক্রোনাস একশন
function incrementAsync() {
return (dispatch) => {
setTimeout(() => {
dispatch({ type: 'INCREMENT' });
}, 1000);
};
}
// স্টোরে সাবস্ক্রাইব করা
store.subscribe(() => {
console.log('State updated:', store.getState());
});
// অ্যাসিনক্রোনাস একশন ডিসপ্যাচ করা
store.dispatch(incrementAsync());
এখানে:
- applyMiddleware(thunk) ব্যবহার করে Redux স্টোরে Thunk middleware যুক্ত করা হয়েছে।
- incrementAsync অ্যাসিনক্রোনাস অ্যাকশন যা
setTimeoutব্যবহার করে একশন ডিসপ্যাচ করবে।
সারাংশ
Redux-এ স্টোর তৈরি এবং কনফিগার করা মূল কাজগুলির একটি। স্টোর হল যেখানে অ্যাপ্লিকেশনের সমস্ত স্টেট ধারণ করা হয়, এবং এটি createStore ফাংশন দ্বারা তৈরি করা হয়। একাধিক রিডিউসার থাকতে পারে, এবং সেগুলিকে combineReducers ব্যবহার করে একত্রিত করা হয়। স্টোর কনফিগারেশনে middleware যুক্ত করা যায়, যা অ্যাসিনক্রোনাস একশন বা অন্য কাস্টম লজিক পরিচালনার জন্য ব্যবহার হয়। Redux Thunk এর মতো middleware ব্যবহার করে অ্যাসিনক্রোনাস কাজ সহজে পরিচালনা করা যায়।
Redux-এ Initial State (প্রাথমিক স্টেট) সেট করা গুরুত্বপূর্ণ, কারণ এটি স্টোরের শুরুতে অ্যাপ্লিকেশনটির স্টেট নির্ধারণ করে। যখন Redux স্টোর তৈরি করা হয়, তখন যদি কোনও স্টেট পাস না করা হয়, তাহলে একটি ডিফল্ট বা প্রাথমিক স্টেট প্রয়োজন হয় যা স্টোরের প্রথম অবস্থা হিসেবে কাজ করে। প্রাথমিক স্টেটটি সাধারণত রিডিউসারের মধ্যে ডিফাইন করা হয়, এবং এটি অ্যাপ্লিকেশনের প্রথমে কী ডেটা থাকবে তা নির্ধারণ করে।
Initial State কী?
Initial State হলো স্টোরে রাখা প্রথম স্টেট, যা অ্যাপ্লিকেশন চালু হওয়ার সময় প্রাথমিক অবস্থায় থাকে। এটি রিডিউসারের মধ্যে ডিফাইন করা হয় এবং স্টোরটি তৈরি হওয়ার সময় ব্যবহৃত হয়। প্রাথমিক স্টেট নির্ধারণ করার মাধ্যমে, অ্যাপ্লিকেশনের শুরুতে কোনো স্টেট বা ডেটা থাকবে তা স্পষ্টভাবে জানা যায়।
Store তৈরি করার সময় Initial State সেট করা
Redux স্টোর তৈরির সময়, আপনি Initial State সরাসরি রিডিউসারের মধ্যে সেট করতে পারেন। যখন Redux স্টোর তৈরি করা হয়, রিডিউসার তার প্রথম আর্গুমেন্ট হিসেবে প্রাথমিক স্টেট গ্রহণ করে। যদি আপনি রিডিউসার ফাংশনে কোনো প্রাথমিক স্টেট উল্লেখ না করেন, তাহলে একটি ডিফল্ট স্টেট ব্যবহার করা হবে।
উদাহরণ:
ধরা যাক, আমরা একটি সিম্পল টুডু অ্যাপ তৈরি করছি, যেখানে প্রাথমিকভাবে টুডু তালিকা খালি থাকবে। এখানে, স্টোরের Initial State সেট করা হবে রিডিউসারে।
import { createStore } from 'redux';
// Initial State
const initialState = {
todos: [] // প্রথমে কোন টুডু আইটেম থাকবে না
};
// Reducer
function todoReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
case 'REMOVE_TODO':
return {
...state,
todos: state.todos.filter(todo => todo.id !== action.payload)
};
default:
return state;
}
}
// Store তৈরি
const store = createStore(todoReducer);
// Store এর স্টেট দেখতে
console.log(store.getState()); // { todos: [] }
এখানে:
- initialState:
{ todos: [] }— এটি স্টোরের প্রাথমিক স্টেট, যেখানে কোন টুডু আইটেম থাকবে না। - todoReducer: এই রিডিউসারটি স্টেট এবং একশন নিয়ে কাজ করে এবং
initialStateকে ডিফল্ট স্টেট হিসেবে গ্রহণ করে। - createStore(todoReducer): স্টোর তৈরি করা হয় এবং এটি
todoReducerব্যবহার করে স্টোরের স্টেট পরিচালনা করে।
Reducer-এ Initial State সেট করা
রিডিউসার ফাংশনের মধ্যে, আপনি যদি একটি ডিফল্ট ভ্যালু নির্ধারণ না করেন, তাহলে Redux একটি undefined স্টেট পাঠাবে। এ ক্ষেত্রে, স্টেটের প্রথমবারের জন্য একটি ডিফল্ট মান নিশ্চিত করতে হবে। সাধারণত, এটি state = initialState দিয়ে সেট করা হয়।
// Reducer with initial state
function todoReducer(state = { todos: [] }, action) {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
default:
return state;
}
}
এখানে:
state = { todos: [] }— এটি ডিফল্ট বা প্রাথমিক স্টেট হিসেবে কাজ করে।- স্টেট পরিবর্তন হলে,
ADD_TODOএকশনের মাধ্যমে নতুন টুডু আইটেম অ্যাড করা হয়।
Initial State এবং Dynamic Data
অনেক সময় অ্যাপ্লিকেশনের প্রাথমিক স্টেটটি ডাইনামিক হতে পারে, যেমন API থেকে ডেটা লোড করা। এই ক্ষেত্রে, আপনি useEffect বা অ্যাসিনক্রোনাস অ্যাকশন (যেমন Redux Thunk ব্যবহার করে) এর মাধ্যমে API কল করতে পারেন, এবং তারপর API থেকে পাওয়া ডেটা স্টেটে সেট করতে পারেন।
উদাহরণ (Redux Thunk ব্যবহার করে):
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// Initial State
const initialState = {
todos: [],
loading: false
};
// Reducer
function todoReducer(state = initialState, action) {
switch (action.type) {
case 'FETCH_TODOS_REQUEST':
return { ...state, loading: true };
case 'FETCH_TODOS_SUCCESS':
return { ...state, loading: false, todos: action.payload };
case 'FETCH_TODOS_FAILURE':
return { ...state, loading: false };
default:
return state;
}
}
// Action Creator (with async behavior)
function fetchTodos() {
return function (dispatch) {
dispatch({ type: 'FETCH_TODOS_REQUEST' });
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_TODOS_FAILURE' });
});
};
}
// Store with Thunk Middleware
const store = createStore(todoReducer, applyMiddleware(thunk));
// Dispatch Async Action
store.dispatch(fetchTodos());
এখানে:
- Initial State:
{ todos: [], loading: false }— স্টোরের প্রাথমিক স্টেট যা প্রথমে খালি টুডু আইটেম ধারণ করবে। - Async Action (fetchTodos): এটি একটি অ্যাসিনক্রোনাস একশন, যা API থেকে টুডু ডেটা ফেচ করে এবং সফল হলে স্টোরে সেট করে।
- Thunk Middleware: Redux Thunk ব্যবহার করে আমরা অ্যাসিনক্রোনাস অ্যাকশনটি ডিসপ্যাচ করেছি।
সারাংশ
Redux-এ Initial State হল সেই প্রাথমিক স্টেট যা স্টোর তৈরি করার সময় রিডিউসারে নির্ধারণ করা হয়। এটি অ্যাপ্লিকেশনের প্রথম অবস্থা হিসেবে কাজ করে এবং যখন অ্যাপ্লিকেশন চালু হয়, তখন সেই স্টেটটি স্টোরে উপস্থিত থাকে। স্টেটের ডিফল্ট মান নির্ধারণ করতে রিডিউসারের মধ্যে state = initialState ব্যবহার করা হয়। স্টোর তৈরির সময় প্রাথমিক স্টেট পাস না করলে, রিডিউসার একটি ডিফল্ট স্টেট ব্যবহার করবে। ডাইনামিক ডেটার ক্ষেত্রে, অ্যাসিনক্রোনাস অ্যাকশন এবং থাঙ্ক (Thunk) ব্যবহার করে API থেকে ডেটা ফেচ করা হতে পারে।
Redux DevTools একটি অত্যন্ত শক্তিশালী টুল যা আপনাকে Redux স্টেট এবং অ্যাপ্লিকেশনের একশনগুলির ইতিহাস দেখতে সাহায্য করে। এটি বিশেষভাবে স্টেট পরিবর্তন ট্র্যাক করা, রিডিউসারের কাজ এবং একশনের ফলাফল বিশ্লেষণ করতে সাহায্য করে, যা ডিবাগিং প্রক্রিয়াকে আরও সহজ এবং দ্রুত করে তোলে। Redux DevTools ব্রাউজার এক্সটেনশন হিসেবে কাজ করে এবং আপনি এটি যেকোনো সময় চালু/বন্ধ করতে পারেন।
Redux DevTools কনফিগারেশন ব্যবহার করার জন্য আপনাকে কিছু পদক্ষেপ অনুসরণ করতে হবে, যাতে এটি স্টোরের সাথে সঠিকভাবে কাজ করতে পারে। এই টিউটোরিয়ালে, Redux DevTools কনফিগারেশন কিভাবে করতে হয় তা বিস্তারিতভাবে আলোচনা করা হবে।
Redux DevTools কনফিগারেশন প্রক্রিয়া
Redux DevTools কনফিগারেশন করতে কিছু সিম্পল স্টেপ অনুসরণ করতে হবে। সাধারণত এটি দুইটি প্রধান অংশে বিভক্ত:
- Redux DevTools ব্রাউজার এক্সটেনশন ইনস্টল করা।
- Redux স্টোরে DevTools কনফিগারেশন সংযুক্ত করা।
১. Redux DevTools ব্রাউজার এক্সটেনশন ইনস্টল করা
প্রথমে, আপনাকে আপনার ব্রাউজারে Redux DevTools এক্সটেনশন ইনস্টল করতে হবে।
- Chrome: Redux DevTools Chrome Extension থেকে ইনস্টল করুন।
- Firefox: Redux DevTools Firefox Extension থেকে ইনস্টল করুন।
এটি ইনস্টল করার পর, আপনি আপনার ব্রাউজারে DevTools প্যানেলে Redux নামে একটি নতুন ট্যাব দেখতে পাবেন, যেখানে আপনি স্টোরের অবস্থা এবং একশনের ইতিহাস ট্র্যাক করতে পারবেন।
২. Redux স্টোরে DevTools কনফিগারেশন সংযুক্ত করা
এখন, Redux DevTools এক্সটেনশনটি কাজ করার জন্য আপনার অ্যাপ্লিকেশনের Redux স্টোর কনফিগারেশন সম্পাদন করতে হবে। Redux DevTools ব্যবহার করার জন্য, createStore ফাংশনের সাথে DevTools সংযোগ করা হয়।
Redux DevTools কনফিগারেশন দুটি প্রধান পদ্ধতিতে করা যেতে পারে:
- উন্নত কনফিগারেশন (Advanced Configuration)
- সাধারণ কনফিগারেশন (Simple Configuration)
সাধারণ কনফিগারেশন
Redux DevTools একটি সাধারণ কনফিগারেশনে স্বয়ংক্রিয়ভাবে ব্রাউজারের এক্সটেনশনকে ডিটেক্ট করতে পারে। আপনি যদি কোনো ব্রাউজার এক্সটেনশন ইনস্টল করেন, তবে Redux স্টোর স্বয়ংক্রিয়ভাবে DevTools এর সাথে সংযুক্ত হয়ে যাবে।
import { createStore } from 'redux';
import rootReducer from './reducers';
// DevTools কনফিগারেশন
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;
এখানে:
window.__REDUX_DEVTOOLS_EXTENSION__এক্সটেনশনটি চেক করে।- যদি এক্সটেনশনটি উপস্থিত থাকে, তবে এটি ডেভটুলসের জন্য একটি সংযোগ তৈরি করে।
উন্নত কনফিগারেশন
যদি আপনি DevTools-এর কনফিগারেশন আরও কাস্টমাইজ করতে চান, তাহলে আপনি Enhancer ব্যবহার করতে পারেন। এর মাধ্যমে আপনি ডেভটুলসের কার্যকারিতা কাস্টমাইজ করতে পারেন, যেমন যে কোনও একশন লগিং, ডিবাগging ইত্যাদি।
import { createStore } from 'redux';
import rootReducer from './reducers';
// Redux DevTools Enhancer কনফিগারেশন
const devToolsEnhancer = window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__({
trace: true, // ট্রেসিং (একশনগুলি কীভাবে স্টেট পরিবর্তন করছে তা দেখতে)
traceLimit: 25, // সর্বোচ্চ ২৫টি একশন ট্রেস করা
})
: (f) => f;
const store = createStore(
rootReducer,
devToolsEnhancer
);
export default store;
এখানে:
trace: true: একশনগুলির ট্রেসিং সক্রিয় করা, যার মাধ্যমে আপনি কোন একশনগুলি স্টেট পরিবর্তন করছে তা দেখতে পারবেন।traceLimit: 25: সর্বোচ্চ ২৫টি একশন ট্রেস করবে।
Redux DevTools ব্যবহার করার সুবিধা
- স্টেট ইতিহাস: Redux DevTools আপনার অ্যাপ্লিকেশনের সমস্ত স্টেট পরিবর্তন ইতিহাস সংরক্ষণ করে, যা আপনাকে পূর্ববর্তী অবস্থায় ফিরে যেতে সহায়তা করে।
- স্টেপ-বাই-স্টেপ ডিবাগিং: আপনি একশনগুলো স্টেপ বাই স্টেপ দেখতে পারবেন এবং কিভাবে এগুলি স্টেট পরিবর্তন করছে তা ট্র্যাক করতে পারবেন।
- লগিং এবং অডিটিং: আপনি একশনগুলির লগ দেখতে পারেন এবং প্রতিটি একশনের কার্যকলাপ বিশ্লেষণ করতে পারবেন।
- ডিফল্ট স্টেট পুনরুদ্ধার: স্টোরের কোনো পয়েন্ট থেকে বর্তমান স্টেট পুনরুদ্ধার করতে পারেন।
- প্রযুক্তিগত বিশ্লেষণ:
traceএবংtraceLimitফিচার ব্যবহার করে আপনি ডিবাগিং উন্নত করতে পারেন।
Redux DevTools এর মাধ্যমে একশন ট্র্যাকিং
Redux DevTools প্যানেলে আপনি একশনগুলোর একটি তালিকা দেখতে পাবেন, এবং প্রতিটি একশনের সাথে সংশ্লিষ্ট স্টেট পরিবর্তন দেখতে পারবেন। এতে, আপনি দেখতে পারবেন:
- কোন একশনটি ট্রিগার হয়েছে।
- প্রতিটি একশনের পর স্টেট কেমন পরিবর্তিত হয়েছে।
- রিডিউসার ও স্টোরের মধ্যে ডেটার ফ্লো কেমন হচ্ছে।
সারাংশ
Redux DevTools একটি অত্যন্ত শক্তিশালী টুল যা Redux অ্যাপ্লিকেশনগুলির স্টেট পরিবর্তন ট্র্যাক করতে সাহায্য করে। এটি সহজে ইনস্টল এবং কনফিগার করা যায়, এবং আপনি স্টোরের ইতিহাস, একশনগুলো, এবং তাদের ফলাফল সহজেই বিশ্লেষণ করতে পারেন। ব্রাউজার এক্সটেনশন ইনস্টল করার পর, Redux DevTools ডিফল্টভাবে স্টোরের সাথে সংযুক্ত থাকে এবং উন্নত কনফিগারেশনের মাধ্যমে আরও কাস্টমাইজড ফিচার ব্যবহার করতে পারেন। DevTools ব্যবহারের মাধ্যমে আপনি ডিবাগিং, স্টেট ম্যানেজমেন্ট, এবং একশন ট্র্যাকিংয়ের প্রক্রিয়াকে আরও সহজ করতে পারবেন।
Read more
