Redux Toolkit এবং Traditional Redux এর মধ্যে তুলনা

Redux এবং Redux Toolkit (RTK) দুইটি মূল টুল যা React অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টে ব্যবহৃত হয়। Redux Toolkit Redux এর একটি অফিশিয়াল লাইব্রেরি যা Redux ব্যবহারের প্রক্রিয়াকে সহজ, দ্রুত এবং কমপ্লেক্সিটি কমাতে ডিজাইন করা হয়েছে। Traditional Redux সাধারণত অনেক বেশি কোড এবং কনফিগারেশন প্রয়োজন করে, যেখানে Redux Toolkit অনেক বেশি সরলীকৃত এবং স্বয়ংক্রিয় পদ্ধতিতে কাজ করে।

এখানে আমরা Redux Toolkit এবং Traditional Redux এর মধ্যে মূল পার্থক্যগুলো তুলনা করবো।

১. সেটআপ এবং কনফিগারেশন (Setup and Configuration)

Traditional Redux:

Traditional Redux ব্যবহারের সময় অনেক বেশি কনফিগারেশন এবং কোড লেখা প্রয়োজন। এর মধ্যে স্টোর, রিডিউসার, একশন, একশন ক্রিয়েটর এবং ডিসপ্যাচিং সহ আরো অনেক কিছু ম্যানুয়ালি তৈরি করতে হয়।

// Actions
const ADD_TODO = 'ADD_TODO';

function addTodoAction(todo) {
  return { type: ADD_TODO, payload: todo };
}

// Reducer
function todosReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
}

// Store
import { createStore } from 'redux';

const store = createStore(todosReducer);

এখানে স্টোর, একশন এবং রিডিউসার সব কিছু আলাদাভাবে ম্যানুয়ালি সেটআপ করতে হয়।

Redux Toolkit:

Redux Toolkit দিয়ে এইসব কাজ সহজ হয়ে যায়। configureStore এবং createSlice এর মাধ্যমে স্টোর এবং রিডিউসার একসাথে তৈরি করা যায়। একশনগুলোও স্বয়ংক্রিয়ভাবে জেনারেট হয়।

import { createSlice, configureStore } from '@reduxjs/toolkit';

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    }
  }
});

const store = configureStore({
  reducer: {
    todos: todoSlice.reducer
  }
});

export const { addTodo } = todoSlice.actions;

এখানে, createSlice দিয়ে একশন এবং রিডিউসার একসাথে তৈরি করা হচ্ছে, এবং configureStore দিয়ে স্টোর কনফিগার করা হচ্ছে। এটি অনেক বেশি সহজ এবং কম কোডে কাজ করা যায়।

২. একশন (Actions)

Traditional Redux:

Traditional Redux এ একশন এবং একশন ক্রিয়েটর আলাদাভাবে তৈরি করতে হয়, যা কোডের পরিমাণ বাড়িয়ে দেয়।

const ADD_TODO = 'ADD_TODO';

function addTodoAction(todo) {
  return {
    type: ADD_TODO,
    payload: todo
  };
}

Redux Toolkit:

Redux Toolkit এ, createSlice এর মাধ্যমে একশন এবং রিডিউসার একত্রে তৈরি হয়, ফলে একশন আলাদাভাবে তৈরি করার প্রয়োজন পড়ে না।

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    }
  }
});

এখানে addTodo একশন স্বয়ংক্রিয়ভাবে তৈরি হয়েছে, এবং একশন ক্রিয়েটরের আলাদা কোনো কোড লেখার প্রয়োজন হয়নি।

৩. অ্যাসিঙ্ক্রোনাস একশন (Async Actions)

Traditional Redux:

Traditional Redux এ অ্যাসিঙ্ক্রোনাস একশন ম্যানেজ করতে redux-thunk বা অন্য middleware ব্যবহার করতে হয়, এবং এটির জন্য আলাদা কোড লেখা হয়।

function fetchTodos() {
  return function(dispatch) {
    fetch('/api/todos')
      .then(response => response.json())
      .then(data => dispatch({ type: 'SET_TODOS', payload: data }));
  };
}

Redux Toolkit:

Redux Toolkit এ createAsyncThunk ব্যবহার করে অ্যাসিঙ্ক্রোনাস একশন ম্যানেজ করা খুবই সহজ। এটি স্বয়ংক্রিয়ভাবে পেন্ডিং, ফুলফিলড এবং রিজেক্টেড স্টেট হ্যান্ডেল করে।

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  const response = await fetch('/api/todos');
  return response.json();
});

const todoSlice = createSlice({
  name: 'todos',
  initialState: { todos: [], status: 'idle' },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.todos = action.payload;
      })
      .addCase(fetchTodos.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

এখানে, createAsyncThunk দিয়ে অ্যাসিঙ্ক্রোনাস একশন সহজে তৈরি করা হয়েছে এবং স্টেট ম্যানেজমেন্টও স্বয়ংক্রিয়ভাবে হ্যান্ডেল হচ্ছে।

৪. স্টোর কনফিগারেশন (Store Configuration)

Traditional Redux:

Traditional Redux এ স্টোর কনফিগার করার জন্য createStore ফাংশন ব্যবহার করতে হয়, এবং ম্যানুয়ালি middleware এবং devtools সেটআপ করতে হয়।

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';

const store = createStore(
  rootReducer,
  applyMiddleware(logger)
);

Redux Toolkit:

Redux Toolkit এ স্টোর কনফিগার করা অনেক সহজ। configureStore ব্যবহার করলে এটি স্বয়ংক্রিয়ভাবে middleware এবং Redux DevTools সমর্থন করে।

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer
});

এখানে configureStore ব্যবহার করে স্টোর কনফিগার করা হয়েছে, যা middleware এবং DevTools সমর্থন দেয় এবং কোড অনেক কম হয়।

৫. স্টেট মিউটেশন (State Mutation)

Traditional Redux:

Traditional Redux এ, স্টেট মিউটেশন এড়াতে স্পষ্টভাবে স্টেটের কপি তৈরি করতে হয়, যেমন স্প্রেড অপারেটর বা Object.assign() ব্যবহার করা হয়।

case 'ADD_TODO':
  return [...state, action.payload];

Redux Toolkit:

Redux Toolkit এ, createSlice ব্যবহারের সময়, স্টেটের ডিফল্ট মিউটেশন অনুমোদিত থাকে, তবে এটি অপ্রত্যক্ষভাবে Immer লাইব্রেরি ব্যবহার করে মিউটেশন সঠিকভাবে ম্যানেজ করে।

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload); // মিউটেশন অনুমোদিত
    }
  }
});

এখানে, Redux Toolkit স্টেট মিউটেশন সরাসরি অনুমোদন করে, তবে Immer লাইব্রেরি ব্যবহার করে এটি সুরক্ষিতভাবে পরিচালিত হয়।

৬. টুলস এবং লাইব্রেরি (Tools and Libraries)

Traditional Redux:

Traditional Redux ব্যবহারে অনেক বেশি বাইরের লাইব্রেরি এবং টুলস ব্যবহারের প্রয়োজন হয়, যেমন redux-thunk, redux-logger, redux-devtools-extension ইত্যাদি।

Redux Toolkit:

Redux Toolkit এ অনেক টুলস এবং লাইব্রেরি অন্তর্নিহিতভাবে অন্তর্ভুক্ত থাকে, যেমন redux-thunk (অ্যাসিঙ্ক্রোনাস একশনের জন্য), redux-logger এবং redux-devtools-extension অটোমেটিক্যালি কনফিগার করা থাকে।

সারাংশ

Redux Toolkit Redux ব্যবহারের জন্য একটি আধুনিক এবং সরলীকৃত উপায়, যা কোডের পরিমাণ কমায়, ডেভেলপারদের জন্য কমপ্লেক্সিটি হ্রাস করে এবং অ্যাপ্লিকেশন ডেভেলপমেন্টকে অনেক দ্রুত এবং সহজ করে তোলে। Traditional Redux ব্যবহার করার সময় যতটা সময় এবং কোড

লেখা প্রয়োজন, Redux Toolkit তা অনেক কমিয়ে দেয়।