Web Development Redux Toolkit এর পরিচিতি গাইড ও নোট

Redux Toolkit (RTK) হল Redux এর অফিসিয়াল লাইব্রেরি যা Redux অ্যাপ্লিকেশন তৈরি করার প্রক্রিয়াকে আরও সহজ, দ্রুত, এবং উন্নত করে তোলে। এটি Redux ব্যবহারের জন্য একটি সিম্পল API প্রদান করে এবং অনেক সাধারণ কাজ যেমন স্টোর তৈরি, একশন, রিডিউসার, এবং মিডলওয়্যার সেটআপের কাজগুলো স্বয়ংক্রিয়ভাবে পরিচালনা করে। Redux Toolkit, Redux-কে আরও উন্নত এবং ব্যবহারকারী-বান্ধব করে তোলে, বিশেষ করে নতুন ব্যবহারকারীদের জন্য।

Redux Toolkit প্রথমে @reduxjs/toolkit নামে পরিচিত ছিল এবং এটি Redux-এর ক্লাসিক API-র উপর একটি উন্নত মানের অভিজ্ঞতা প্রদান করে।

Redux Toolkit এর উদ্দেশ্য

Redux Toolkit এর মূল উদ্দেশ্য ছিল Redux ব্যবহারের জটিলতা কমানো এবং সাধারণ কনফিগারেশন এবং কোডের পরিমাণ কমিয়ে দেওয়া। এটি Redux এর সাথে সাধারণভাবে ব্যবহার করা যাবতীয় কাজগুলো একত্রিত করে এবং সেই কাজগুলোর জন্য অটোমেটিক সেটআপ প্রদান করে। এর মাধ্যমে আপনি অনেক বেশি দ্রুত এবং সহজে Redux অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Redux Toolkit এর সুবিধা

1. সাধারণ ও সহজ API:
   Redux Toolkit একটি সহজ এবং কোড-কমপ্লেক্সিটি কম করা API প্রদান করে। এটি কেবলমাত্র কয়েকটি মেথডের মাধ্যমে স্টোর, একশন এবং রিডিউসার তৈরি করতে সহায়তা করে।
2. Code Boilerplate কমানো:
   Redux Toolkit এর মাধ্যমে আপনাকে একশন টাইপ, একশন ক্রিয়েটর, এবং রিডিউসার সহ প্রচুর কোড লিখতে হয় না। createSlice() ফাংশন দিয়ে একসাথে একশন এবং রিডিউসার তৈরি করা যায়, যা প্রচুর বয়লারপ্লেট কোড কমায়।
3. Immutable State Update:
   Redux Toolkit অবজেক্ট এবং অ্যারে আপডেট করার জন্য Immer নামক লাইব্রেরি ব্যবহার করে, যা স্টেট মিউটেশনকে নিরাপদ করে তোলে। এটি স্টেটকে ইমিউটেবল (immutable) রাখার জন্য যেকোনো স্টেট পরিবর্তনকে স্বয়ংক্রিয়ভাবে ডিপ-কপি (deep copy) করে।
4. Redux DevTools integration:
   Redux Toolkit স্বয়ংক্রিয়ভাবে Redux DevTools ইনস্টল করে দেয়, যা ডিবাগিং প্রক্রিয়াটি অনেক সহজ করে তোলে। এটি স্টোরের স্টেট এবং একশন লগ করা এবং ট্র্যাক করা সহজ করে তোলে।
5. এক্সটেনসিবিলিটি এবং স্কেলেবিলিটি:
   Redux Toolkit স্টোর কনফিগারেশনকে সহজ করে তোলে এবং একাধিক রিডিউসার এবং মডুলার ফিচার যুক্ত করা সহজ হয়। এটি বড় অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত উপকারী।

Redux Toolkit এর মূল কম্পোনেন্ট

Redux Toolkit-এ কয়েকটি মূল ফাংশনালিটি রয়েছে যা Redux ব্যবহারে নতুন সুবিধা যোগ করে:

1. configureStore():
   Redux স্টোর তৈরি করার জন্য ব্যবহৃত হয়। এটি স্বয়ংক্রিয়ভাবে কিছু প্রাথমিক কনফিগারেশন যেমন redux-thunk middleware এবং Redux DevTools integration যোগ করে।

   import { configureStore } from '@reduxjs/toolkit';
   
   const store = configureStore({
     reducer: {
       // Reducers will go here
     }
   });
   

2. createSlice():
   এটি একটি অত্যন্ত শক্তিশালী ফাংশন যা একসাথে একশন এবং রিডিউসার তৈরি করে। এতে আপনি স্টেট, একশন টাইপ এবং রিডিউসারের লজিক একসাথে একটি স্লাইস (slice) হিসেবে ডিফাইন করতে পারেন।

   উদাহরণ:

   import { createSlice } from '@reduxjs/toolkit';
   
   const counterSlice = createSlice({
     name: 'counter',
     initialState: { value: 0 },
     reducers: {
       increment: (state) => {
         state.value += 1;
       },
       decrement: (state) => {
         state.value -= 1;
       }
     }
   });
   
   export const { increment, decrement } = counterSlice.actions;
   export default counterSlice.reducer;
   

3. createAsyncThunk():
   এটি অ্যাসিনক্রোনাস একশনগুলি (যেমন API কল) তৈরি করতে ব্যবহৃত হয়। এটি একটি থাংক (thunk) ফাংশন তৈরি করে, যা প্রমিজ হ্যান্ডলিং এবং স্টেট আপডেট সহজ করে তোলে।

   উদাহরণ:

   import { createAsyncThunk } from '@reduxjs/toolkit';
   
   export const fetchUser = createAsyncThunk(
     'user/fetchUser',
     async (userId) => {
       const response = await fetch(`/api/user/${userId}`);
       return response.json();
     }
   );
   

4. createReducer():
   এটি সাধারণ রিডিউসার তৈরি করার জন্য একটি বিকল্প ফাংশন, যেখানে আপনি ইমিউটেবল স্টেট আপডেট করতে পারেন। যদিও createSlice() অনেক সময় বেশি ব্যবহৃত হয়, createReducer()-এর ব্যবহারও সঠিক পরিস্থিতিতে হতে পারে।

Redux Toolkit এর সাথে স্টোর কনফিগারেশন

Redux Toolkit স্টোর কনফিগারেশন প্রক্রিয়াকে অনেক সহজ করে তোলে। এর মাধ্যমে স্টোর তৈরি করার জন্য আপনাকে শুধু reducer প্রদান করতে হবে, এবং এটি স্বয়ংক্রিয়ভাবে middleware এবং Redux DevTools সেটআপ করে দেবে।

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

এখানে:

• counterReducer হ’ল সেই reducer যা createSlice() দিয়ে তৈরি হয়েছে।
• configureStore() স্বয়ংক্রিয়ভাবে Redux DevTools এবং middleware যেমন redux-thunk যুক্ত করবে।

Redux Toolkit এর মাধ্যমে একশন এবং রিডিউসার তৈরি করা

Redux Toolkit-এ createSlice() ব্যবহার করে একসাথে একশন এবং রিডিউসার তৈরি করা যায়, যা Redux ব্যবহারের প্রক্রিয়া আরও সোজা এবং পরিষ্কার করে।

উদাহরণ:

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

// Create slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

// Export actions
export const { increment, decrement } = counterSlice.actions;

// Export reducer
export default counterSlice.reducer;

এখানে:

• createSlice() ফাংশনটি name, initialState, এবং reducers নিয়ে একটি স্লাইস তৈরি করেছে।
• increment এবং decrement একশনগুলি স্বয়ংক্রিয়ভাবে তৈরি হয়েছে এবং রিডিউসার ফাংশনটি স্বয়ংক্রিয়ভাবে ইনলক করে দেওয়া হয়েছে।

সারাংশ

Redux Toolkit হল Redux অ্যাপ্লিকেশন তৈরি করার জন্য একটি আধুনিক এবং শক্তিশালী টুলকিট যা Redux ব্যবহারের জটিলতা কমায়। এটি স্টোর তৈরি, একশন এবং রিডিউসার তৈরি, এবং অ্যাসিনক্রোনাস একশনের জন্য প্রক্রিয়া অনেক সহজ করে দেয়। configureStore(), createSlice(), এবং createAsyncThunk() এর মতো ফাংশনগুলো Redux এর বয়লারপ্লেট কোড কমায় এবং কোড লেখার সময় অনেক সাশ্রয় করে। Redux Toolkit ব্যবহার করলে আপনি Redux এর শক্তি লাভ করবেন, তবে একসাথে কোড লিখতে হবে অনেক কম।

Redux Toolkit (RTK) হচ্ছে Redux এর জন্য একটি অফিসিয়াল লাইব্রেরি, যা Redux ব্যবহারকে সহজ, দ্রুত, এবং কার্যকরী করার জন্য তৈরি করা হয়েছে। Redux ব্যবহারের সময় প্রাথমিকভাবে অনেক boilerplate কোড লিখতে হত, যা অ্যাপ্লিকেশনের উন্নয়ন প্রক্রিয়াকে ধীর করে দিত। Redux Toolkit এই সমস্যাগুলি সমাধান করতে পারে এবং Redux ব্যবহারের অভিজ্ঞতা সহজ ও উন্নত করে।

Redux Toolkit মূলত দুটি উদ্দেশ্য পূরণ করে:

1. Redux ব্যবহারের জন্য কোডের পরিমাণ কমানো
2. Redux-কে আরও সহজ ও ত্রুটিমুক্ত করে তোলা

Redux Toolkit-এ অনেক বিল্ট-ইন ফিচার এবং সহায়ক ফাংশন আছে, যা Redux অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় কমপ্লেক্সিটি কমিয়ে দেয় এবং কোডটি পরিষ্কার এবং কমপ্লেক্সিটি হ্রাস করে।

Redux Toolkit এর প্রধান বৈশিষ্ট্যসমূহ

Redux Toolkit বিভিন্ন গুরুত্বপূর্ণ টুল এবং ফিচার প্রদান করে যা Redux ব্যবহার করা আরও সহজ ও শক্তিশালী করে:

1. configureStore: স্টোর তৈরির জন্য সহজ এবং কমপ্লেক্সিটি হ্রাসকারী পদ্ধতি
2. createSlice: রিডিউসার এবং অ্যাকশন একসাথে তৈরি করার জন্য একটি সহজ উপায়
3. createAsyncThunk: অ্যাসিনক্রোনাস একশন হ্যান্ডলিংয়ের জন্য একটি বিল্ট-ইন ফাংশন
4. DevTools এবং Middleware: ডিফল্টভাবে Redux DevTools এবং middleware ব্যবহারের সুবিধা
5. Immutability and Safety: ডিফল্টভাবে Immutable State এর জন্য সুবিধা প্রদান
6. createEntityAdapter: এন্টিটি ডেটার জন্য সহজভাবে স্টেট পরিচালনা

Redux Toolkit এর সুবিধা

1. কম কোড লিখতে হয়
   Redux Toolkit স্টোর তৈরি, একশন, এবং রিডিউসার লিখতে সময় বাঁচায়। এর configureStore এবং createSlice ফাংশন ব্যবহারের মাধ্যমে, Redux অ্যাপ্লিকেশন তৈরি করা অনেক দ্রুত হয়ে ওঠে। পূর্বের Redux-এ স্টোর, একশন এবং রিডিউসার আলাদা আলাদা করে লিখতে হত, কিন্তু RTK তে সবকিছু একত্রে সহজভাবে ম্যানেজ করা যায়।
2. Redux DevTools এর সাথে ইন্টিগ্রেশন
   Redux Toolkit ডিফল্টভাবে Redux DevTools সাপোর্ট করে, যা ডেভেলপারদের জন্য স্টেট পরিবর্তন ট্র্যাক এবং ডিবাগ করা সহজ করে দেয়। DevTools এর মাধ্যমে, আপনি স্টোরের স্টেট, একশন এবং তার সাথে যুক্ত অন্যান্য ডেটা বিশ্লেষণ করতে পারেন।
3. বিল্ট-ইন Middleware সাপোর্ট
   Redux Toolkit স্টোর তৈরি করার সময় বিল্ট-ইন কিছু মিডলওয়্যার (যেমন redux-thunk) সহ আসে, যা অ্যাসিনক্রোনাস অপারেশন এবং API কল হ্যান্ডলিংয়ের জন্য খুবই সহায়ক।
4. স্টেট অপরিবর্তনীয়তা (Immutability) বজায় রাখা
   Redux Toolkit Immer নামে একটি লাইব্রেরি ব্যবহার করে, যা রিডিউসার ফাংশনে স্টেট অপরিবর্তনীয় (immutable) রাখে। এটি ডেভেলপারদের জন্য খুবই সুবিধাজনক, কারণ তারা সরাসরি স্টেট পরিবর্তন করতে পারে না, তবে Immer লাইব্রেরি তাদের জন্য একটি copy তৈরি করে, যা নিরাপদে পরিবর্তন করা যায়।

5. এ্যাসিনক্রোনাস একশন হ্যান্ডলিং (Async Action Handling)
   Redux Toolkit তে createAsyncThunk নামে একটি ফাংশন আছে, যা অ্যাসিনক্রোনাস একশন সহজভাবে তৈরি করতে সহায়তা করে। এক্ষেত্রে, API কল বা অন্যান্য অ্যাসিনক্রোনাস কাজগুলোকে সহজভাবে ম্যানেজ করা যায়।

   উদাহরণ:

   import { createAsyncThunk } from '@reduxjs/toolkit';
   
   // createAsyncThunk Example
   export const fetchUserData = createAsyncThunk(
     'user/fetchData',
     async (userId, thunkAPI) => {
       const response = await fetch(`/api/user/${userId}`);
       return response.json();
     }
   );
   

6. Simplified Reducer Creation (রিডিউসার তৈরি সহজ করা)
   createSlice ফাংশন ব্যবহার করে একত্রে রিডিউসার এবং অ্যাকশন তৈরি করা যায়। এটি স্টেট এবং অ্যাকশন সংক্রান্ত কোডকে সংক্ষিপ্ত এবং সংগঠিত করে, যা Redux অ্যাপ্লিকেশনের স্কেলেবিলিটি বাড়ায়।

   উদাহরণ:

   import { createSlice } from '@reduxjs/toolkit';
   
   const userSlice = createSlice({
     name: 'user',
     initialState: { name: '', age: 0 },
     reducers: {
       setUser: (state, action) => {
         state.name = action.payload.name;
         state.age = action.payload.age;
       }
     }
   });
   
   export const { setUser } = userSlice.actions;
   export default userSlice.reducer;
   

7. createEntityAdapter ফিচার
   Redux Toolkit-এর createEntityAdapter ফিচারটি বড় ডেটা সেটগুলোকে সহজে ম্যানেজ করার জন্য ব্যবহৃত হয়। এটি স্টেটের এন্টিটি গুলোর সাথে কাজ করা অনেক সহজ করে, যেমনঃ একটা বড় অ্যারে বা অবজেক্টের মধ্যে বিভিন্ন আইটেমকে অ্যাড, রিমুভ বা আপডেট করা।
8. স্কেলেবিলিটি ও মেইনটেনেন্স
   Redux Toolkit কোডের স্কেলেবিলিটি ও মেইনটেনেন্সকে সহজ করে। এটি ডেভেলপারদের জন্য শক্তিশালী কনভেনশন এবং সহজ API প্রদান করে, যা বড় প্রজেক্টগুলোতে কাজ করতে সহায়ক।

Redux Toolkit ব্যবহার করার উদাহরণ

স্টোর তৈরি করা:

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

const store = configureStore({
  reducer: {
    user: userReducer
  }
});

export default store;

স্লাইস তৈরি করা (Reducer + Action):

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

const userSlice = createSlice({
  name: 'user',
  initialState: { name: '', age: 0 },
  reducers: {
    setUser: (state, action) => {
      state.name = action.payload.name;
      state.age = action.payload.age;
    }
  }
});

export const { setUser } = userSlice.actions;
export default userSlice.reducer;

অ্যাসিনক্রোনাস একশন (Async Action):

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

export const fetchUserData = createAsyncThunk(
  'user/fetchData',
  async (userId) => {
    const response = await fetch(`/api/user/${userId}`);
    return response.json();
  }
);

সারাংশ

Redux Toolkit Redux ব্যবহারের জন্য একটি আধুনিক এবং শক্তিশালী টুল যা কোড লেখার সময় অনেক কাজ সহজ করে দেয়। এর মাধ্যমে স্টোর, একশন, এবং রিডিউসার তৈরি করা অনেক দ্রুত ও কার্যকর হয়। createSlice, createAsyncThunk, এবং configureStore এর মতো বিল্ট-ইন ফিচারগুলো Redux ব্যবহারে ডেভেলপারদের সময় বাঁচায়, কোড কম্প্লেক্সিটি কমায়, এবং অ্যাপ্লিকেশনকে স্কেলেবেল ও মেইনটেইনেবল রাখে। Redux Toolkit এর মাধ্যমে অ্যাসিনক্রোনাস একশন, স্টেট অপরিবর্তনীয়তা, এবং সহজ ডিবাগিং সুবিধা পাওয়া যায়, যা Redux-কে একটি আরও উন্নত এবং পছন্দনীয় লাইব্রেরি করে তোলে।

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

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

Redux Toolkit এর সুবিধাসমূহ

1. সহজ কনফিগারেশন: স্টোর তৈরি এবং কনফিগারেশন অনেক সহজ।
2. বিকল্পভাবে একাধিক রিডিউসার ব্যবহারের সুবিধা: combineReducers ব্যবহার না করে, একাধিক রিডিউসারকে একত্রিত করা যায়।
3. ব্লট-কোড কমানো: Reducer এবং Action Creators অনেক কম কোডে তৈরি করা যায়।
4. অটোমেটিক থঙ্ক সাপোর্ট: Redux Toolkit থঙ্ক সাপোর্ট করে, যা অ্যাসিনক্রোনাস অ্যাকশন পরিচালনা করতে সাহায্য করে।

Redux Toolkit ব্যবহার করে Store এবং Reducer তৈরি করার প্রক্রিয়া

স্টেপ ১: Redux Toolkit ইনস্টল করা

প্রথমে Redux Toolkit এবং React-Redux ইনস্টল করতে হবে।

npm install @reduxjs/toolkit react-redux

স্টেপ ২: Slice তৈরি করা

Redux Toolkit-এর মূল ধারণা হল slice। Slice হলো একটি Redux স্টেটের টুকরা এবং এর সাথে সংশ্লিষ্ট রিডিউসার, অ্যাকশন ক্রিয়েটরসহ সমস্ত কোড একত্রিত থাকে।

Redux Toolkit-এর createSlice ফাংশন ব্যবহার করে slice তৈরি করা যায়। এটি রিডিউসার এবং অ্যাকশন ক্রিয়েটর উভয়কে একত্রিত করে।

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

// Initial state
const initialState = {
  counter: 0
};

// Slice creation using createSlice
const counterSlice = createSlice({
  name: 'counter', // Slice name
  initialState, // Initial state
  reducers: {
    increment: (state) => {
      state.counter += 1;
    },
    decrement: (state) => {
      state.counter -= 1;
    },
    incrementByAmount: (state, action) => {
      state.counter += action.payload;
    }
  }
});

// Exporting the actions
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Exporting the reducer
export default counterSlice.reducer;

এখানে:

• createSlice দিয়ে একটি slice তৈরি করা হয়েছে, যেখানে name, initialState, এবং reducers ফিল্ডগুলো রয়েছে।
• increment, decrement, এবং incrementByAmount তিনটি অ্যাকশন তৈরি করা হয়েছে যেগুলো স্টেট পরিবর্তন করবে।

স্টেপ ৩: Store তৈরি করা

Redux Toolkit-এ স্টোর তৈরি করার জন্য configureStore ব্যবহার করা হয়, যা স্টোর কনফিগারেশন অনেক সহজ করে দেয়।

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

// Store creation
const store = configureStore({
  reducer: {
    counter: counterReducer, // Register the slice reducer
  }
});

export default store;

এখানে:

• configureStore দিয়ে স্টোর তৈরি করা হয়েছে এবং এতে counterReducer পাস করা হয়েছে, যা counter slice-এ সংরক্ষিত স্টেটের জন্য ব্যবহৃত হবে।

স্টেপ ৪: React অ্যাপে Store প্রদান করা

React অ্যাপে Redux স্টোর ব্যবহারের জন্য, Provider কম্পোনেন্ট ব্যবহার করতে হবে, যা স্টোরটি পুরো অ্যাপ্লিকেশনে প্রদান করবে।

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store'; // Import the store

// Wrapping the app in the Provider and passing the store
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

এখানে:

• Provider কম্পোনেন্টটি স্টোরটি অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্টে প্রদান করবে, যাতে কম্পোনেন্টগুলো Redux স্টেট অ্যাক্সেস করতে পারে।

স্টেপ ৫: Store থেকে স্টেট গ্রহণ করা এবং Action Dispatch করা

React কম্পোনেন্টে Redux স্টেট ব্যবহারের জন্য useSelector এবং useDispatch হুক ব্যবহার করা হয়।

// App.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

function App() {
  const counter = useSelector((state) => state.counter.counter); // Accessing the counter state
  const dispatch = useDispatch(); // Dispatch function

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default App;

এখানে:

• useSelector ব্যবহার করে স্টোর থেকে counter স্টেট নেয়া হয়েছে।
• useDispatch ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা হয়েছে, যেমন increment, decrement, এবং incrementByAmount।

সারাংশ

Redux Toolkit ব্যবহার করে স্টোর এবং রিডিউসার তৈরি করা খুবই সহজ এবং কার্যকরী। createSlice ফাংশন দিয়ে একটি slice তৈরি করা হয়, যেখানে রিডিউসার এবং অ্যাকশন একত্রিত থাকে। তারপর configureStore ফাংশন দিয়ে স্টোর তৈরি করা হয় এবং এটি অ্যাপ্লিকেশনে প্রদান করার জন্য Provider কম্পোনেন্ট ব্যবহার করা হয়। React কম্পোনেন্টে স্টেট অ্যাক্সেস এবং অ্যাকশন ডিসপ্যাচ করার জন্য useSelector এবং useDispatch হুক ব্যবহার করা হয়। Redux Toolkit-এ এই সমস্ত কাজগুলি খুব কম কোডে করা যায়, ফলে Redux ব্যবহারে অনেক সুবিধা পাওয়া যায়।

Redux Toolkit-এ createAsyncThunk একটি খুবই শক্তিশালী ফিচার যা অ্যাসিনক্রোনাস একশন তৈরি করতে সাহায্য করে। এটি সাধারণত API কল, ডেটা ফেচিং, অথবা অন্য কোন অ্যাসিনক্রোনাস কাজের জন্য ব্যবহার করা হয়। createAsyncThunk অ্যাসিনক্রোনাস কার্যক্রমের জন্য সিম্পল এবং রিডাবল কৌশল প্রদান করে, এবং এটি Redux স্টেটে সুনির্দিষ্ট ভাবে পেন্ডিং, ফুলফিলড এবং রিজেক্টেড স্টেট ম্যানেজ করতে সাহায্য করে।

createAsyncThunk এর উপকারিতা:

1. অ্যাসিনক্রোনাস কাজ সহজে পরিচালনা: API কল বা অন্য অ্যাসিনক্রোনাস কাজগুলোর জন্য কোড কমপ্লেক্সিটি কমায়।
2. স্টেট ম্যানেজমেন্ট: অ্যাসিনক্রোনাস একশনের প্রতিটি স্টেজ (পেন্ডিং, ফুলফিলড, রিজেক্টেড) স্বয়ংক্রিয়ভাবে স্টেটে ট্র্যাক করা হয়।
3. পুনঃব্যবহারযোগ্যতা: অ্যাসিনক্রোনাস কাজগুলোকে আরও রিডেবল এবং সিকোয়েন্সেবল করা হয়।

createAsyncThunk এর মৌলিক গঠন

createAsyncThunk একটি ফাংশন যা তিনটি মূল অংশ নিয়ে কাজ করে:

1. এ্যাকশন টাইপ (Action type): এই একশনটি একটি স্ট্রিং টাইপ হিসেবে দেওয়া হয় যা অ্যাকশন নামের মতো ব্যবহার হয়।
2. এ্যাসিনক্রোনাস কনফিগারেশন (Async function): এই ফাংশনটি একশনটি ডিসপ্যাচ করার সময় চালু হয়। সাধারণত এখানে একটি API কল বা অন্য কোন অ্যাসিনক্রোনাস কার্যক্রম থাকে।
3. বিকল্প (Optional config): কিছু কনফিগারেশন দেয়া যায় যা অ্যাকশন স্টেটের পূর্ণাঙ্গ কন্ট্রোল প্রদান করে (যেমন, meta ডেটা, rejectWithValue ব্যবহার ইত্যাদি)।

createAsyncThunk এর উদাহরণ

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন আছে যেখানে একজন ব্যবহারকারীর তথ্য API থেকে ফেচ করতে হবে। এই কাজটি createAsyncThunk দিয়ে করা যাবে।

১. Redux Toolkit ইনস্টল করা

প্রথমে, Redux Toolkit ইনস্টল করা প্রয়োজন:

npm install @reduxjs/toolkit react-redux

২. createAsyncThunk ব্যবহার করে অ্যাসিনক্রোনাস একশন তৈরি করা

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

// API কল করার জন্য createAsyncThunk
export const fetchUserData = createAsyncThunk(
  'user/fetchData', // একশন টাইপ
  async (userId, { rejectWithValue }) => {
    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
      if (!response.ok) {
        throw new Error('Failed to fetch user data');
      }
      return await response.json();
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

// Slice তৈরি করা
const userSlice = createSlice({
  name: 'user',
  initialState: {
    data: null,
    status: 'idle', // 'idle', 'loading', 'succeeded', 'failed'
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state) => {
        state.status = 'loading'; // যখন API কল চলছে
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.status = 'succeeded'; // API কল সফল হলে
        state.data = action.payload; // API থেকে পাওয়া ডেটা
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.status = 'failed'; // API কল ব্যর্থ হলে
        state.error = action.payload; // ত্রুটির বার্তা
      });
  }
});

export default userSlice.reducer;

এখানে:

• createAsyncThunk ফাংশনটি অ্যাসিনক্রোনাস একশন তৈরি করেছে। এটি fetchUserData নামে একশনটি তৈরি করে, যা userId প্যারামিটার গ্রহণ করে এবং API থেকে ডেটা ফেচ করে।
• extraReducers ব্যবহার করে আমরা pending, fulfilled, এবং rejected স্টেটগুলি ম্যানেজ করেছি।

৩. স্টোরে fetchUserData একশন সংযুক্ত করা

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

const store = configureStore({
  reducer: {
    user: userReducer
  }
});

export default store;

এখানে userSlice.reducer Redux স্টোরে যুক্ত করা হয়েছে।

৪. React কম্পোনেন্টে createAsyncThunk ব্যবহার করা

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserData } from './userSlice';

const UserProfile = ({ userId }) => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user.data);
  const status = useSelector((state) => state.user.status);
  const error = useSelector((state) => state.user.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchUserData(userId)); // Dispatching the async action
    }
  }, [status, dispatch, userId]);

  let content;

  if (status === 'loading') {
    content = <div>Loading...</div>;
  } else if (status === 'succeeded') {
    content = <div>User: {user.name}</div>;
  } else if (status === 'failed') {
    content = <div>Error: {error}</div>;
  }

  return <div>{content}</div>;
};

export default UserProfile;

এখানে:

• UserProfile কম্পোনেন্টে, আমরা useDispatch এবং useSelector হুক ব্যবহার করে স্টোর থেকে স্টেট নিয়েছি।
• useEffect ব্যবহার করে যখন কম্পোনেন্টটি লোড হয়, তখন API কল করার জন্য dispatch(fetchUserData(userId)) ডাকা হয়।

createAsyncThunk এর অন্যান্য ফিচার

1. rejectWithValue ব্যবহার করা:
   যদি আপনি অ্যাসিনক্রোনাস কাজের মধ্যে কাস্টম ত্রুটি ম্যানেজ করতে চান, তবে rejectWithValue ব্যবহার করতে পারেন।

const fetchUserData = createAsyncThunk(
  'user/fetchData',
  async (userId, { rejectWithValue }) => {
    try {
      const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
      if (!response.ok) {
        throw new Error('User not found');
      }
      return await response.json();
    } catch (error) {
      return rejectWithValue(error.message); // Reject with custom error message
    }
  }
);

2. meta ডেটা:
   আপনি meta ডেটা দিয়ে অ্যাকশন সম্পর্কে অতিরিক্ত তথ্য যোগ করতে পারেন, যা রিডিউসারে ব্যবহৃত হতে পারে।

const fetchUserData = createAsyncThunk(
  'user/fetchData',
  async (userId, { getState, requestId, rejectWithValue }) => {
    // Using getState() or requestId for custom logic
  }
);

সারাংশ

Redux Toolkit-এর createAsyncThunk ফাংশনটি অ্যাসিনক্রোনাস কার্যক্রমের জন্য অত্যন্ত উপকারী। এটি API কল বা অন্য অ্যাসিনক্রোনাস কাজগুলোকে সহজ এবং সুসংগঠিতভাবে পরিচালনা করতে সাহায্য করে। createAsyncThunk স্টেটের পেন্ডিং, ফুলফিলড, এবং রিজেক্টেড স্টেট স্বয়ংক্রিয়ভাবে ট্র্যাক করে, যা অ্যাসিনক্রোনাস কাজের জন্য খুবই কার্যকর। এটি Redux অ্যাপ্লিকেশনকে আরও রিডেবল, স্কেলেবল এবং কার্যকরী করে তোলে।

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

Redux Toolkit মূলত Redux অ্যাপ্লিকেশনের জটিলতাগুলি দূর করতে ডিজাইন করা হয়েছে এবং এটি একটি সহজ ও প্রতিরোধযোগ্য স্টেট ম্যানেজমেন্ট সমাধান প্রদান করে।

এই টিউটোরিয়ালে, আমরা Redux Toolkit ব্যবহার করে Redux স্টোরের কনফিগারেশন এবং সাধারণ Redux অ্যাপ্লিকেশন স্ট্রাকচার সরল করার পদ্ধতি নিয়ে আলোচনা করব।

Redux Toolkit কি?

Redux Toolkit (RTK) Redux এর একটি অফিসিয়াল লাইব্রেরি যা স্টোর কনফিগারেশন, একশন ক্রিয়েশন, রিডিউসার তৈরি, এবং থাংক (asynchronous actions) পরিচালনা করার জন্য শক্তিশালী এবং সহজ সরঞ্জাম সরবরাহ করে। এটি বেশ কিছু সুবিধা প্রদান করে, যেমন:

• স্টোর কনফিগারেশন সহজ করা: Redux স্টোর কনফিগারেশনের জন্য কমপ্লেক্স কোড কমিয়ে দেয়।
• রিডিউসার ফাংশন তৈরি সহজ করা: createSlice() এর মাধ্যমে রিডিউসার তৈরি করা অনেক সহজ।
• অ্যাসিনক্রোনাস কাজ সহজ করা: createAsyncThunk() দিয়ে অ্যাসিনক্রোনাস একশন তৈরি করা সহজ।
• স্টেট এবং একশন ফিচার একত্রিত করা: একক ফিচারের স্টেট এবং একশনকে একটি স্লাইস (slice) হিসেবে সংগঠিত করা হয়।

Redux Toolkit এর মৌলিক ফিচার

Redux Toolkit এ কিছু গুরুত্বপূর্ণ ফিচার রয়েছে যা Redux ব্যবহারের জটিলতাগুলি অনেকাংশে কমিয়ে দেয়।

১. configureStore():

Redux স্টোর কনফিগার করার জন্য configureStore() ফাংশন ব্যবহার করা হয়, যা স্বয়ংক্রিয়ভাবে Redux DevTools এবং middleware যোগ করে।

২. createSlice():

এটি একক ফিচারের স্টেট এবং একশন তৈরি করতে ব্যবহৃত হয়। এতে স্টেট ও রিডিউসার একত্রিত থাকে, ফলে কোড আরও পরিষ্কার এবং সহজ হয়।

৩. createAsyncThunk():

এটি অ্যাসিনক্রোনাস একশন ক্রিয়েট করতে ব্যবহৃত হয়। এটি API কল বা অন্য যেকোনো অ্যাসিনক্রোনাস কাজ সহজে করতে সহায়তা করে।

৪. createEntityAdapter():

এই ফিচারটি ডাটা এনটিটিগুলোর জন্য স্টোর ম্যানেজমেন্টকে আরও সহজ করে। এটি প্রাথমিকভাবে ডাটাবেস মডেল এর মতো অ্যাডাপটারের সাহায্যে ডাটা পরিচালনা করতে ব্যবহার হয়।

Redux Toolkit দিয়ে Redux স্ট্রাকচার কিভাবে সরল করবেন?

Redux Toolkit ব্যবহার করে Redux স্ট্রাকচারকে সহজ এবং পরিষ্কার করার জন্য কিছু পদক্ষেপ নেওয়া হয়। নিচে একটি সাধারিত স্টেপ-বাই-স্টেপ গাইড দেওয়া হল:

১. Redux Toolkit ইনস্টল করা

প্রথমে, আপনার প্রজেক্টে Redux Toolkit ইনস্টল করতে হবে:

npm install @reduxjs/toolkit react-redux

২. configureStore() দিয়ে স্টোর কনফিগার করা

Redux স্টোর কনফিগার করতে configureStore() ব্যবহার করা হয়, যা স্টোরকে প্রয়োজনীয় মiddleware এবং DevTools সহ কনফিগার করে।

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './features/todo/todoSlice';

const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

export default store;

এখানে:

• configureStore() ব্যবহার করা হয়েছে স্টোর কনফিগার করতে।
• reducer এর মধ্যে আমরা todoReducer যোগ করেছি।

৩. createSlice() দিয়ে স্লাইস তৈরি করা

Redux Toolkit এর একটি শক্তিশালী ফিচার হলো createSlice()। এটি স্টেট, একশন এবং রিডিউসার একত্রিত করে দেয়, যা সাধারণ Redux অ্যাপ্লিকেশনে আলাদা আলাদা ফাইল এবং কোডের প্রয়োজন হয়। এটি অনেক কম কোডে Redux সিস্টেম তৈরি করতে সাহায্য করে।

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

// Slice তৈরি করা
const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload.id);
    },
  },
});

export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

এখানে:

• createSlice() ফাংশনটি একটি স্লাইস তৈরি করে, যার মধ্যে স্টেট এবং reducers সংজ্ঞায়িত থাকে।
• addTodo এবং removeTodo হলো আমাদের একশন, যা reducers এর মধ্যে প্রকাশিত হয়েছে।

৪. createAsyncThunk() দিয়ে অ্যাসিনক্রোনাস একশন তৈরি করা

Redux Toolkit আপনাকে সহজেই অ্যাসিনক্রোনাস একশন তৈরির সুবিধা দেয়। createAsyncThunk() এর মাধ্যমে আপনি API কল বা ডেটা ফেচিং ইত্যাদি কাজ পরিচালনা করতে পারবেন।

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

// অ্যাসিনক্রোনাস একশন তৈরি
export const fetchTodos = createAsyncThunk(
  'todos/fetchTodos',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    return response.json();
  }
);

const todoSlice = createSlice({
  name: 'todos',
  initialState: {
    todos: [],
    status: 'idle',
  },
  reducers: {},
  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';
      });
  },
});

export default todoSlice.reducer;

এখানে:

• createAsyncThunk() ব্যবহার করা হয়েছে অ্যাসিনক্রোনাস একশন তৈরি করতে।
• extraReducers অংশে pending, fulfilled এবং rejected অবস্থাগুলির মধ্যে স্টেট পরিবর্তন করা হয়েছে।

৫. React কম্পোনেন্টে Redux স্টেট ব্যবহার করা

Redux Toolkit ব্যবহার করার পর, আপনার React কম্পোনেন্টে স্টেট ব্যবহার করতে useSelector() এবং useDispatch() হুক ব্যবহার করা হয়।

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, removeTodo, fetchTodos } from './features/todo/todoSlice';

function TodoApp() {
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos.todos);

  const [todoText, setTodoText] = useState('');

  const handleAddTodo = () => {
    dispatch(addTodo({ id: Date.now(), text: todoText }));
    setTodoText('');
  };

  const handleFetchTodos = () => {
    dispatch(fetchTodos());
  };

  return (
    <div>
      <input
        type="text"
        value={todoText}
        onChange={(e) => setTodoText(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <button onClick={handleFetchTodos}>Fetch Todos</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => dispatch(removeTodo({ id: todo.id }))}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

এখানে:

• useSelector() হুক দিয়ে স্টেট থেকে todos নেয়া হচ্ছে।
• useDispatch() হুক দিয়ে addTodo, removeTodo এবং fetchTodos একশন ডিস্ট্রিবিউট করা হচ্ছে।

সারাংশ

Redux Toolkit Redux এর কাজকে অনেক সহজ এবং কমপ্লেক্সিটি কমিয়ে দেয়। এটি স্টোর কনফিগারেশন, রিডিউসার এবং অ্যাসিনক্রোনাস একশন নির্মাণে সহায়ক সরঞ্জাম সরবরাহ করে। createSlice() এবং createAsyncThunk() এর মতো ফিচারের মাধ্যমে Redux স্টেট ম্যানেজমেন্ট এবং অ্যাপ্লিকেশন কাঠামো সহজ করা হয়, যা ডেভেলপারদের কম কোড লিখে আরও কার্যকরী অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।