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 থেকে ডেটা ফেচ করা হতে পারে।
