Web Development Nested Reducers তৈরি এবং ব্যবহার গাইড ও নোট

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

Nested Reducers ব্যবহার করার মাধ্যমে আপনি Redux স্টেটকে আরও সংগঠিত, বর্ধনশীল এবং সহজে মেইনটেইনযোগ্য রাখতে পারেন।

Nested Reducers এর প্রয়োজনীয়তা

Redux স্টেট সাধারণত flat structure-এ রাখা হয়, কিন্তু কিছু ক্ষেত্রে স্টেটের মধ্যে nested (ডিপ) স্ট্রাকচার থাকতে পারে। যেমন, আপনি যদি অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য আলাদা আলাদা স্টেট রাখেন, তবে nested reducers আপনার কাজকে সহজ করে তোলে।

উদাহরণ:

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

Nested Reducers তৈরি করার প্রক্রিয়া

১. Sub-reducers (nested reducers) তৈরি করুন। ২. combineReducers ব্যবহার করে এই রিডিউসারগুলোকে একত্রিত করুন।

১. Sub-Reducers তৈরি করা

প্রথমে আমরা users এবং posts নামে দুটি ডোমেইন তৈরি করবো। users স্টেটের মধ্যে আবার profile এবং settings নামক দুটি অংশ থাকবে, যার জন্য আমরা nested reducers তৈরি করব।

Users Reducer (Nested Reducer)

// profileReducer.js
const initialState = {
  name: '',
  email: ''
};

const profileReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_PROFILE':
      return {
        ...state,
        ...action.payload
      };
    default:
      return state;
  }
};

export default profileReducer;

// settingsReducer.js
const initialState = {
  theme: 'light',
  notifications: true
};

const settingsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return {
        ...state,
        theme: state.theme === 'light' ? 'dark' : 'light'
      };
    case 'TOGGLE_NOTIFICATIONS':
      return {
        ...state,
        notifications: !state.notifications
      };
    default:
      return state;
  }
};

export default settingsReducer;

Posts Reducer

// postsReducer.js
const initialState = [];

const postsReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_POST':
      return [...state, action.payload];
    case 'DELETE_POST':
      return state.filter(post => post.id !== action.payload.id);
    default:
      return state;
  }
};

export default postsReducer;

এখানে, profileReducer এবং settingsReducer দুটি পৃথক reducer যা users স্টেটের অংশ হিসেবে ব্যবহৃত হবে। একইভাবে, postsReducer আলাদা স্টেট পরিচালনা করবে।

২. combineReducers ব্যবহার করা

এখন, আমরা combineReducers ফাংশন ব্যবহার করে এই রিডিউসারগুলিকে একত্রিত করব, যাতে users স্টেটের মধ্যে profile এবং settings অন্তর্ভুক্ত করা যায়, এবং posts আলাদা স্টেট হিসেবে থাকবে।

// rootReducer.js
import { combineReducers } from 'redux';
import profileReducer from './profileReducer';
import settingsReducer from './settingsReducer';
import postsReducer from './postsReducer';

// Nested Reducers Combine করা
const usersReducer = combineReducers({
  profile: profileReducer,
  settings: settingsReducer
});

// Root Reducer তৈরি করা
const rootReducer = combineReducers({
  users: usersReducer,
  posts: postsReducer
});

export default rootReducer;

এখানে:

• usersReducer-এ profile এবং settings রিডিউসারগুলোকে combine করা হয়েছে।
• মূল rootReducer-এ users এবং posts স্টেট আলাদাভাবে combine করা হয়েছে।

৩. Redux Store কনফিগার করা

এখন, আমরা এই rootReducer ব্যবহার করে Redux স্টোর কনফিগার করব।

// store.js
import { createStore } from 'redux';
import rootReducer from './rootReducer';

const store = createStore(rootReducer);

export default store;

৪. Redux State ব্যবহার করা

আপনি এখন স্টোরে ডেটা অ্যাক্সেস করতে পারেন এবং dispatch করে স্টেট পরিবর্তন করতে পারেন।

স্টেট অ্যাক্সেস করা:

import { useSelector } from 'react-redux';

function UserProfile() {
  const profile = useSelector(state => state.users.profile);

  return (
    <div>
      <h1>{profile.name}</h1>
      <p>{profile.email}</p>
    </div>
  );
}

স্টেট পরিবর্তন করা:

import { useDispatch } from 'react-redux';

function UpdateProfile() {
  const dispatch = useDispatch();

  const handleUpdate = () => {
    dispatch({
      type: 'UPDATE_PROFILE',
      payload: { name: 'John Doe', email: 'john@example.com' }
    });
  };

  return (
    <button onClick={handleUpdate}>Update Profile</button>
  );
}

এখানে:

• useSelector দিয়ে আমরা users.profile থেকে ডেটা নিয়েছি।
• useDispatch দিয়ে আমরা অ্যাকশন UPDATE_PROFILE ডিসপ্যাচ করছি।

সারাংশ

Nested Reducers Redux স্টেটের জন্য একটি শক্তিশালী এবং সংগঠিত পদ্ধতি প্রদান করে। আপনি যখন স্টেটের ভেতরে আরো ছোট অংশ তৈরি করেন, তখন combineReducers এর সাহায্যে আপনি সেগুলিকে একত্রিত করে মূল স্টোরে যোগ করতে পারেন। এটি স্টেট ম্যানেজমেন্টকে আরো পরিষ্কার, সংহত এবং অ্যাপ্লিকেশন ডেভেলপমেন্টের ক্ষেত্রে আরও স্কেলেবল করে তোলে।

এভাবে Nested Reducers ব্যবহার করে আপনি Redux স্টেটের ভেতরে বিভিন্ন স্তরের ডেটা সহজে ম্যানেজ করতে পারবেন এবং স্টেটের প্রতিটি অংশের জন্য আলাদা রিডিউসার তৈরি করতে পারবেন।