Store তৈরি এবং কনফিগার করা

Redux-এ স্টোর (Store) হলো এমন একটি জায়গা যেখানে অ্যাপ্লিকেশনের সমস্ত স্টেট ধারণ করা হয়। স্টোর তৈরি এবং কনফিগার করা Redux অ্যাপ্লিকেশনের মূল স্তম্ভগুলোর একটি, কারণ এর মাধ্যমে পুরো অ্যাপ্লিকেশনের স্টেট পরিচালনা করা হয়। স্টোর তৈরি করার জন্য createStore ফাংশন এবং combineReducers এর মতো টুলস ব্যবহার করা হয়। একবার স্টোর তৈরি হয়ে গেলে, এটিতে রিডিউসার (Reducers) এবং মিডলওয়্যার (Middleware) যুক্ত করা যায়।

এখানে আমরা দেখবো কিভাবে Redux স্টোর তৈরি এবং কনফিগার করা যায়।

স্টোর তৈরি করার প্রাথমিক ধাপ

Redux স্টোর তৈরি করার জন্য প্রধানত দুটি উপাদান প্রয়োজন: স্টেট (State) এবং রিডিউসার (Reducer)। রিডিউসার স্টেট পরিবর্তন করে এবং স্টেটের নতুন কপি তৈরি করে।

স্টোর তৈরি করার জন্য সাধারণ পদ্ধতি:

1. রিডিউসার তৈরি করা (Creating a Reducer)
   প্রথমে আপনাকে একটি রিডিউসার তৈরি করতে হবে। রিডিউসার ফাংশনটি অ্যাকশন এবং পূর্ববর্তী স্টেট গ্রহণ করে এবং একটি নতুন স্টেট রিটার্ন করে।
2. স্টোর তৈরি করা (Creating the Store)
   তারপর createStore ফাংশন ব্যবহার করে স্টোর তৈরি করতে হবে। এখানে আমরা রিডিউসার পাস করবো যা স্টেট পরিবর্তন করবে।
3. স্টোরে সাবস্ক্রাইব করা (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 ব্যবহার করে অ্যাসিনক্রোনাস কাজ সহজে পরিচালনা করা যায়।