Web Development Redux Toolkit এর Slice এবং Reducer Logic গাইড ও নোট

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

Slice কী?

Slice একটি Redux Toolkit এর কনসেপ্ট যা স্টেটের একটি অংশ, একশন এবং রিডিউসারকে একত্রিত করে। সাধারণভাবে, Redux-এ স্টেট, একশন, এবং রিডিউসার আলাদা আলাদা ফাইল ও স্থানে থাকে, কিন্তু Slice এক জায়গায় এগুলোর সংমিশ্রণ ঘটায়, যা কোডকে আরো সোজা এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

Slice এর মধ্যে সাধারণত তিনটি মূল উপাদান থাকে:

1. Name: Slice এর নাম, যা একশন টাইপ এবং স্টেট সনাক্ত করতে ব্যবহৃত হয়।
2. Initial State: Slice এর প্রাথমিক স্টেট।
3. Reducers: স্টেট পরিবর্তনের জন্য ব্যবহৃত ফাংশনগুলো।

Slice এর উদাহরণ:

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

const todoSlice = createSlice({
  name: 'todos', // Slice এর নাম
  initialState: [], // প্রাথমিক স্টেট
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload); // স্টেট পরিবর্তন
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload.id); // টুডু মুছে ফেলা
    }
  }
});

// Slice থেকে একশন এবং রিডিউসার এক্সপোর্ট করা হচ্ছে
export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

এখানে:

• name: todos – এই slice এর নাম।
• initialState: একটি খালি অ্যারে, যা প্রাথমিক টুডু আইটেমের স্টেট ধারণ করে।
• reducers: দুটি ফাংশন (addTodo এবং removeTodo) যেগুলি স্টেট পরিবর্তন করে।

Reducer Logic কী?

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

Reducer Logic এর কাজ:

• স্টেট পরিবর্তন: Reducer স্টেটকে নতুন ডেটার সাথে আপডেট করে। তবে, Redux-এ স্টেট অইমিউটেবল থাকে, তাই reducer সাধারণত নতুন স্টেট অবজেক্ট তৈরি করে পুরোনো স্টেট পরিবর্তন না করে।
• Action Handling: Reducer শুধুমাত্র স্টেট পরিবর্তন করতে পারে যদি একশন টাইপ মেলে। এটি action.type ব্যবহার করে একশনটি শনাক্ত করে এবং স্টেট পরিবর্তন করে।

createSlice এর সাথে Reducer Logic

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

const counterSlice = createSlice({
  name: 'counter', // Slice এর নাম
  initialState: 0, // প্রাথমিক স্টেট
  reducers: {
    increment: (state) => {
      return state + 1; // স্টেট পরিবর্তন
    },
    decrement: (state) => {
      return state - 1; // স্টেট পরিবর্তন
    }
  }
});

// Slice থেকে একশন এবং রিডিউসার এক্সপোর্ট
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

এখানে:

• increment এবং decrement হল রিডিউসার ফাংশন যা স্টেট পরিবর্তন করে।
• state এখানে একটি সংখ্যা (counter value) এবং এটি সরাসরি পরিবর্তন না করে তার একটি নতুন ভ্যালু রিটার্ন করছে।

createSlice এবং Reducer Logic এর সুবিধা

1. সহজ এবং পরিষ্কার কোড: Redux Toolkit-এর createSlice দিয়ে একশন এবং রিডিউসার একত্রিত করা হয়, ফলে একাধিক ফাইল ও কমপ্লেক্স কোড লেখা থেকে মুক্তি পাওয়া যায়।
2. অটোমেটিক রিডিউসার তৈরি: createSlice স্বয়ংক্রিয়ভাবে রিডিউসার তৈরি করে, যার ফলে ডেভেলপারদের রিডিউসারের গঠন নিয়ে চিন্তা করতে হয় না।
3. স্টেট মিউটেশন সহজ: Redux Toolkit-এ Immer লাইব্রেরি ব্যবহার করা হয়, যার ফলে রিডিউসার ফাংশনে স্টেট মিউটেট করা সম্ভব (স্টেটের পিউরিটি বজায় রেখে)।
4. কনসিস্টেন্ট একশন টাইপ: একশন টাইপ এবং একশন ক্রিয়েটর আলাদা আলাদা ফাইল বা অংশে থাকতে না হয়ে একত্রিত থাকে, যা কোডকে বেশি কনসিস্টেন্ট এবং ট্র্যাক করা সহজ করে।

Reducer Logic এ Immer ব্যবহারের উদাহরণ

Redux Toolkit নিজে থেকেই Immer লাইব্রেরি অন্তর্ভুক্ত করে, যার মাধ্যমে আপনি সরাসরি স্টেট মিউটেট করতে পারেন। এতে মিউটেশন সমস্যা থেকে মুক্তি পাওয়া যায় এবং কোড সিম্পল থাকে।

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

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload); // Immer লাইব্রেরি স্টেট মিউটেশন অনুমোদন করে
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload.id);
    }
  }
});

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

এখানে, state.push(action.payload) রিডিউসারে সরাসরি স্টেট মিউটেশন ঘটানো হচ্ছে, যা Immer লাইব্রেরির মাধ্যমে নিরাপদ এবং কার্যকরীভাবে করা যায়।

Slice এবং Reducer Logic এর ব্যবহারের উপকারিতা

1. কোডের কমপ্লেক্সিটি কমানো: এক্সট্রা ফাইল এবং কোড কমপ্লেক্সিটি দূর করার মাধ্যমে ডেভেলপমেন্টের গতি বাড়ানো যায়।
2. সহজ ডিবাগিং: Slice-এর মাধ্যমে কোডটি আরো সহজবোধ্য এবং ট্র্যাকযোগ্য হয়ে ওঠে, যা ডিবাগিং সহজ করে।
3. সামঞ্জস্যপূর্ণ স্টেট পরিবর্তন: Reducer ফাংশনগুলির মধ্যে একটি নির্দিষ্ট স্টাইল এবং কাজের পদ্ধতি বজায় রাখার মাধ্যমে কোডের সঙ্গতি বজায় থাকে।

সারাংশ

Redux Toolkit এর Slice এবং Reducer Logic স্টেট ম্যানেজমেন্টকে আরও সোজা এবং কার্যকর করে তোলে। Slice একত্রিত করে স্টেট, একশন এবং রিডিউসারকে, যা Redux অ্যাপ্লিকেশন লেখার প্রক্রিয়াকে সহজ ও দ্রুত করে তোলে। Reducer Logic ব্যবহারে কোডের কমপ্লেক্সিটি কমানো যায় এবং স্টেট ম্যানেজমেন্ট আরও কার্যকরভাবে পরিচালিত হয়। Immer লাইব্রেরি ব্যবহারের মাধ্যমে স্টেট মিউটেশন সহজ হয়ে যায়, যা Redux-কে আরও শক্তিশালী এবং ব্যবহারযোগ্য করে তোলে।

Redux Slice একটি নতুন কনসেপ্ট যা Redux Toolkit-এ উপস্থাপিত হয়েছে এবং এটি স্টেট ম্যানেজমেন্ট প্রক্রিয়াকে সহজ, পরিষ্কার এবং স্কেলেবল করে তোলে। একটি slice মূলত একটি Redux স্টোরের একটি অংশ বা সাব-স্টেট (sub-state), যা নির্দিষ্ট একটি ফিচার বা ফাংশনালিটি সম্পর্কিত স্টেট এবং তার সাথে সম্পর্কিত রিডিউসার এবং একশনকে অন্তর্ভুক্ত করে। Redux Slice এর মাধ্যমে, একটি নির্দিষ্ট অংশের স্টেটকে পরিচালনা করা, একশন ও রিডিউসার তৈরি করা খুবই সহজ হয়ে যায়।

Redux Slice কী?

Redux Slice একটি কনফিগারেশন অবজেক্ট যা একসাথে তিনটি মৌলিক উপাদান ধারণ করে:

1. স্টেট (State): এটি সেই অংশ বা ডেটা যা আপনি স্টোরে সংরক্ষণ করতে চান।
2. রিডিউসার (Reducer): এটি সেই ফাংশন যা স্টেট পরিবর্তন করার জন্য ব্যবহৃত হয়।
3. একশন (Actions): এটি সেই একশনগুলো যা রিডিউসারকে নির্দেশ দেয় স্টেট কিভাবে পরিবর্তন করতে হবে।

Redux Toolkit-এর 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;

এখানে:

• name – slice-এর নাম, যেমন 'counter'।
• initialState – slice-এর প্রাথমিক স্টেট, যেমন { value: 0 }।
• reducers – slice এর রিডিউসার ফাংশন যা স্টেট পরিবর্তন করে (যেমন increment, decrement)।

Redux Slice কেন ব্যবহার করা হয়?

Redux Slice ব্যবহার করার প্রধান সুবিধা হলো এটি Redux স্টোরের স্টেট ম্যানেজমেন্ট প্রক্রিয়াকে সহজ, দ্রুত এবং আরো কম্প্যাক্ট করে তোলে। কিছু মূল কারণ নিচে আলোচনা করা হলো:

১. কোড কমপ্যাক্ট এবং পরিষ্কার করা

Redux Slice ব্যবহারের মাধ্যমে আপনি স্টেট, রিডিউসার এবং একশনগুলি একই জায়গায় রাখতে পারেন, যা কোডকে আরও সংহত এবং পরিষ্কার করে তোলে। একাধিক ফাইল ব্যবস্থাপনার ঝামেলা ছাড়াই আপনি সব কিছু একসাথে পরিচালনা করতে পারেন।

• ফায়দা: কম কোড, সহজ রক্ষণাবেক্ষণ, এবং কম ঝামেলা।

২. প্রক্রিয়া দ্রুত এবং সহজ করা

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

• ফায়দা: বেশি কাস্টম কোড লেখা ছাড়াই অল্প সময়ে রিডিউসার এবং একশন তৈরি করা যায়।

৩. স্টেট ম্যানেজমেন্ট আরও সহজ করা

Redux Slice ব্যবহারে একাধিক স্টেট ম্যানেজমেন্টের টুকরা (slices) সহজে তৈরি করা যায়, যেগুলি অ্যাপ্লিকেশনের বিভিন্ন ফিচার বা অংশের জন্য আলাদা স্টেট পরিচালনা করে। এর মাধ্যমে আপনি সহজেই একটি বড় অ্যাপ্লিকেশনে ফিচার ভিত্তিক স্টেট ম্যানেজমেন্ট করতে পারবেন।

• ফায়দা: অ্যাপ্লিকেশনকে ফিচার ভিত্তিক বিভাজন করে স্টেট ম্যানেজমেন্ট করা যায়।

৪. নিরাপদ এবং পূর্বানুমানযোগ্য স্টেট ম্যানেজমেন্ট

createSlice এর মাধ্যমে আপনি যে স্টেট এবং রিডিউসার তৈরি করবেন তা স্বয়ংক্রিয়ভাবে ইমিউটেবল হবে (মানে আপনি স্টেট সরাসরি পরিবর্তন করতে পারবেন না, পরিবর্তে একটি নতুন স্টেট ফেরত আসবে)। এর ফলে স্টেট ম্যানেজমেন্ট আরো নিরাপদ এবং পূর্বানুমানযোগ্য হয়ে ওঠে।

• ফায়দা: ইমিউটেবল স্টেট নিরাপদ, পূর্বানুমানযোগ্য এবং সমস্যা কম সৃষ্টি করে।

৫. স্বয়ংক্রিয় একশন তৈরি

createSlice ফাংশন স্বয়ংক্রিয়ভাবে প্রতিটি রিডিউসারের জন্য একশন তৈরি করে। এর মানে, আপনি increment বা decrement রিডিউসার লিখলে, এর সাথে সম্পর্কিত একশনও স্বয়ংক্রিয়ভাবে তৈরি হয়ে যাবে। ফলে, আলাদাভাবে একশন তৈরি করার প্রয়োজন হয় না।

• ফায়দা: কোড লেখা সহজ এবং দ্রুত, একশন ফাংশন স্বয়ংক্রিয়ভাবে তৈরি হয়।

৬. সামঞ্জস্যপূর্ণ স্টেট ম্যানেজমেন্ট

একাধিক slice ব্যবহার করলে, প্রত্যেকটি slice আলাদা আলাদা ফিচার বা স্টেট পরিচালনা করতে পারে। এবং আপনি combineReducers ব্যবহার করে সেগুলোর সবকিছু একত্রিত করে Redux স্টোর তৈরি করতে পারবেন। এটি আপনার অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টকে আরো স্কেলেবল এবং সামঞ্জস্যপূর্ণ করে তোলে।

• ফায়দা: বড় অ্যাপ্লিকেশনে একাধিক ফিচার নিয়ে কাজ করা সহজ হয়।

উদাহরণ: একটি Redux Slice এর বাস্তব উদাহরণ

ধরা যাক, আপনি একটি counter ফিচার তৈরি করতে চান যা একটি ভ্যালু বাড়ানো বা কমানোর কাজ করবে। এর জন্য আপনি একটি slice তৈরি করতে পারেন, যেটিতে স্টেট, রিডিউসার এবং একশন থাকবে।

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

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

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

// Configure the store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

export default store;

এখানে:

• name: slice-এর নাম counter।
• initialState: প্রাথমিক স্টেট { value: 0 }।
• reducers: increment, decrement এবং reset রিডিউসারগুলো স্টেট পরিবর্তন করতে ব্যবহৃত হয়।

সারাংশ

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

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

Slice মূলত একটি স্টেট, অ্যাকশন এবং রিডিউসার একত্রিত করে। স্লাইস ব্যবহারের মাধ্যমে, আপনি Redux স্টেট ম্যানেজমেন্ট প্যাটার্নের অনেকগুলো জটিলতা দূর করতে পারেন এবং দ্রুত অ্যাপ্লিকেশন তৈরি করতে পারেন।

Slice কী?

একটি Slice হলো Redux Toolkit-এর একটি ফিচার যা রিডিউসার এবং অ্যাকশন ক্রিয়েটরগুলিকে একটি নির্দিষ্ট ফিচার বা ডোমেনের অধীনে একত্রিত করে। এটি createSlice ফাংশন ব্যবহার করে তৈরি করা হয়।

Slice-এ সাধারণত তিনটি প্রধান অংশ থাকে:

1. name: স্লাইসের নাম (এটি স্টেটের অংশের জন্য ব্যবহৃত হবে)।
2. initialState: স্টেটের প্রাথমিক মান।
3. reducers: রিডিউসার ফাংশন যা স্টেট পরিবর্তন করার জন্য ব্যবহৃত হয়।

Slice তৈরি করার ধাপ

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

Slice তৈরি করার উদাহরণ:

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

// Slice তৈরি করা
const todoSlice = createSlice({
  name: 'todos', // Slice নাম
  initialState: [], // প্রাথমিক স্টেট (এখানে একটি খালি অ্যারে)
  reducers: {
    addTodo(state, action) {
      state.push(action.payload); // নতুন টুডু আইটেম যোগ করা
    },
    removeTodo(state, action) {
      return state.filter(todo => todo.id !== action.payload.id); // টুডু আইটেম মুছে ফেলা
    },
    toggleTodo(state, action) {
      const todo = state.find(todo => todo.id === action.payload.id);
      if (todo) {
        todo.completed = !todo.completed; // টুডু আইটেমের স্ট্যাটাস টগল করা
      }
    }
  }
});

// অ্যাকশন এক্সপোর্ট করা
export const { addTodo, removeTodo, toggleTodo } = todoSlice.actions;

// রিডিউসার এক্সপোর্ট করা
export default todoSlice.reducer;

এখানে:

• name: 'todos' - এটি Slice এর নাম যা পরবর্তীতে স্টোরে ব্যবহৃত হবে।
• initialState: [] - টুডু তালিকার প্রাথমিক স্টেট।
• reducers: এখানে তিনটি রিডিউসার রয়েছে:
  • addTodo: একটি নতুন টুডু আইটেম যোগ করবে।
  • removeTodo: একটি টুডু আইটেম মুছে ফেলবে।
  • toggleTodo: টুডু আইটেমের স্ট্যাটাস পরিবর্তন করবে।

Slice কনফিগার করা (Redux Store-এ সংযুক্ত করা)

Slice তৈরি করার পর, আপনাকে সেটি Redux স্টোরে যুক্ত করতে হবে। Redux স্টোর কনফিগার করতে configureStore ফাংশন ব্যবহৃত হয়।

Redux Store কনফিগার করার উদাহরণ:

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice'; // Slice থেকে রিডিউসার ইম্পোর্ট করা

// স্টোর কনফিগার করা
const store = configureStore({
  reducer: {
    todos: todoReducer // 'todos' নামের রিডিউসার স্টোরে যোগ করা
  }
});

export default store;

এখানে:

• configureStore ফাংশন ব্যবহার করে স্টোর কনফিগার করা হয়েছে।
• todos: todoReducer - স্টোরে todos নামের রিডিউসার যুক্ত করা হয়েছে, যা todoSlice থেকে এসেছে।

Slice এর মাধ্যমে অ্যাকশন ডিসপ্যাচ করা

Slice তৈরি এবং কনফিগার করার পর, আপনি সেই Slice এর অ্যাকশন ব্যবহার করে স্টেট পরিবর্তন করতে পারেন। অ্যাকশন গুলি todoSlice.actions থেকে এক্সপোর্ট করা হয়।

উদাহরণ:

import { useDispatch } from 'react-redux';
import { addTodo, removeTodo, toggleTodo } from './todoSlice';

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

  const handleAddTodo = (text) => {
    dispatch(addTodo({
      id: Date.now(),
      text,
      completed: false
    }));
  };

  const handleRemoveTodo = (id) => {
    dispatch(removeTodo({ id }));
  };

  const handleToggleTodo = (id) => {
    dispatch(toggleTodo({ id }));
  };

  return (
    <div>
      {/* এখানে UI কোড থাকবে */}
    </div>
  );
}

এখানে:

• dispatch(addTodo({})) দ্বারা নতুন টুডু আইটেম যোগ করা হয়েছে।
• dispatch(removeTodo({ id })) দ্বারা টুডু আইটেম মুছে ফেলা হয়েছে।
• dispatch(toggleTodo({ id })) দ্বারা টুডু আইটেমের স্ট্যাটাস টগল করা হয়েছে।

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

Redux Toolkit-এর Slice তৈরি করার সময়, আপনি নিচের মতো আরও কিছু ফিচার ব্যবহার করতে পারেন:

1. ExtraReducers: যদি আপনি অ্যাসিনক্রোনাস অ্যাকশন বা অন্যান্য স্লাইসের সাথে কাজ করতে চান, তবে আপনি extraReducers ফিচার ব্যবহার করতে পারেন।
2. Immer: Redux Toolkit-এ Immer অন্তর্ভুক্ত রয়েছে, যা স্টেট পরিবর্তনের সময় মিউটেশন এড়ানোর জন্য সুবিধা দেয়। আপনি সরাসরি স্টেট পরিবর্তন করতে পারেন, কিন্তু এটি অপ্রত্যাশিত পরিবর্তন থেকে রক্ষা করে।

ExtraReducers এর উদাহরণ:

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo(state, action) {
      state.push(action.payload);
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.fulfilled, (state, action) => {
        return action.payload; // ফেচ করা ডেটা দিয়ে স্টেট আপডেট করা
      });
  }
});

এখানে, fetchTodos.fulfilled একটি অ্যাসিনক্রোনাস অ্যাকশন, যা যখন সফলভাবে সম্পন্ন হবে তখন স্টেট পরিবর্তন করবে।

সারাংশ

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

Reducers Redux এর একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, যা স্টোরের স্টেট পরিবর্তন করার জন্য ব্যবহৃত হয়। রিডিউসার হল একটি pure function (বিশুদ্ধ ফাংশন) যা আগের স্টেট এবং ডিসপ্যাচ করা একশন অনুযায়ী নতুন স্টেট ফেরত দেয়। এখানে, আমরা রিডিউসার তৈরির মূল ধারণা এবং Initial State (প্রাথমিক স্টেট) সেট করার পদ্ধতি আলোচনা করব।

Reducer Logic কী?

Reducer হল একটি ফাংশন যা দুটি আর্গুমেন্ট নেয়:

1. State (আগের স্টেট): এটি হল স্টোরের বর্তমান স্টেট, যা রিডিউসারের মধ্যে পাঠানো হয়।
2. Action (একশন): ডিসপ্যাচ করা একশন অবজেক্ট, যা সাধারণত একটি type ফিল্ড এবং একটি payload (যদি থাকে) ধারণ করে।

এটি সর্বদা একটি নতুন স্টেট রিটার্ন করে এবং কখনোই সরাসরি পুরানো স্টেট পরিবর্তন করে না (এটি immutability principle অনুসরণ করে)।

Reducer এর মৌলিক গঠন

function rootReducer(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.id)
      };

    default:
      return state;
  }
}

এখানে:

• state: এটি আগের স্টেট, যা সাধারণত রিডিউসারের প্রথম আর্গুমেন্ট হিসেবে আসে। যদি এটি undefined হয় (যেমন প্রথমবার স্টোর তৈরি করা হচ্ছে), তবে রিডিউসার initialState ফেরত দেয়।
• action: ডিসপ্যাচ করা একশন অবজেক্ট।
• switch statement: একশনটির টাইপ চেক করে স্টেট পরিবর্তন করে। প্রতিটি case ব্লক নতুন স্টেট তৈরি করে, যা আগের স্টেটের উপর ভিত্তি করে হয়।

Initial State কী এবং কিভাবে সেট করবেন?

Initial State (প্রাথমিক স্টেট) হল অ্যাপ্লিকেশনের স্টেটের প্রথম মান, যা রিডিউসারের প্রথম রান বা স্টোর ইনিশিয়ালাইজ হওয়ার সময় ব্যবহৃত হয়। এটি আপনার অ্যাপ্লিকেশনের সর্বপ্রথম অবস্থার প্রতিনিধিত্ব করে।

যখন Redux স্টোর তৈরি হয়, তখন রিডিউসারের মধ্যে initialState সরবরাহ করা হয়। যদি রিডিউসারে স্টেটের মান undefined হয় (যেমন প্রথমবার স্টোর তৈরি করা হচ্ছে), তখন initialState সেট করা হয়।

Initial State সেট করা

আপনি সাধারণত initialState তৈরি করেন রিডিউসারের বাইরে একটি অবজেক্ট হিসেবে। এটি অ্যাপ্লিকেশনের প্রয়োজনীয় তথ্য ধারণ করে থাকে, যেমন:

• ইউজারের ইনফর্মেশন
• লোডিং স্টেট
• এপ্লিকেশনের বিভিন্ন আইটেমের তালিকা (যেমন, টুডো, পোস্ট)
• কোনো ডিফল্ট কনফিগারেশন

উদাহরণ:

const initialState = {
  todos: [],
  isLoading: false,
  error: null
};

function rootReducer(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.id)
      };

    case 'SET_LOADING':
      return {
        ...state,
        isLoading: action.payload
      };

    case 'SET_ERROR':
      return {
        ...state,
        error: action.payload
      };

    default:
      return state;
  }
}

এখানে:

• initialState: এটি প্রাথমিক স্টেট যা রিডিউসারে ডিফল্ট মান হিসেবে সেট করা হয়।
• todos: এটি টুডো আইটেমের তালিকা ধারণ করে।
• isLoading: এটি লোডিং স্টেট দেখায় (যেমন API কল করার সময়)।
• error: এটি কোনো ত্রুটি বা এরর মেসেজ ধারণ করে।

Reducer Logic এর কাজ কী?

1. State পরিবর্তন করা: রিডিউসার অ্যাপ্লিকেশনের স্টেট পরিবর্তন করার জন্য দায়ী। তবে, এটি সরাসরি স্টেট পরিবর্তন করে না, বরং একটি নতুন স্টেট অবজেক্ট তৈরি করে। এটি immutable প্রিন্সিপাল অনুসরণ করে।
2. স্টেট রিটার্ন করা: রিডিউসার সব সময় একটি নতুন স্টেট রিটার্ন করে, যা আগের স্টেটের উপর ভিত্তি করে হয়।
3. একশন টাইপ অনুযায়ী শাখা তৈরি করা: রিডিউসার বিভিন্ন একশন টাইপের জন্য আলাদা শাখা (case) তৈরি করে, যেখানে একশন অনুযায়ী স্টেট পরিবর্তন হয়।
4. ডিফল্ট স্টেট রিটার্ন করা: যদি কোনো মেলানো একশন টাইপ না পাওয়া যায়, তবে রিডিউসার আগের স্টেট (অথবা ডিফল্ট স্টেট) ফেরত দেয়।

Reducer এবং State Immutable রাখা

Redux-এ স্টেট কখনোই সরাসরি পরিবর্তন করা যাবে না, কারণ এটি immutability প্রিন্সিপাল অনুসরণ করে। তাই, রিডিউসার যখন স্টেট পরিবর্তন করে, তখন নতুন স্টেট অবজেক্ট তৈরি করতে হবে।

যেমন:

return {
  ...state, // আগের স্টেট কপি করুন
  todos: [...state.todos, action.payload] // নতুন টুডো আইটেম যোগ করুন
};

এখানে:

• ...state: এটি আগের স্টেটের সব প্রপার্টি কপি করে।
• [...state.todos, action.payload]: এটি আগের টুডো তালিকা কপি করে এবং নতুন টুডো আইটেম যোগ করে।

এই প্রক্রিয়ায়, আগের স্টেট অপরিবর্তিত থাকে এবং একটি নতুন স্টেট তৈরি হয়, যা Redux এর immutability নিয়মের সাথে সঙ্গতিপূর্ণ।

Default State বা Initial State কেন প্রয়োজন?

1. প্রথমবার স্টোর তৈরি হওয়ার সময়: যখন Redux স্টোর প্রথমবার তৈরি হয়, তখন স্টেটের কোনও মান থাকে না। এ সময় initialState প্রয়োজন যাতে ডিফল্ট মানগুলো থাকতে পারে।
2. রিডিউসার ফাংশনের নিরাপত্তা: স্টেট যদি undefined থাকে, তবে রিডিউসার একটি নিরাপদ এবং মানানসই ডিফল্ট স্টেট ফেরত দেয়।
3. একশন হ্যান্ডলিংয়ের স্থিতিশীলতা: প্রাথমিক স্টেট নিশ্চিত করে যে রিডিউসার সব সময় পূর্বনির্ধারিত কাঠামো অনুযায়ী স্টেট রিটার্ন করবে, যা অ্যাপ্লিকেশনের স্থিতিশীলতা বজায় রাখে।

সারাংশ

Reducers Redux এর স্টোরের স্টেট পরিবর্তন করার জন্য দায়ী। এটি একটি pure function যা আগের স্টেট এবং ডিসপ্যাচ করা একশন অনুযায়ী নতুন স্টেট রিটার্ন করে। Initial State হল অ্যাপ্লিকেশনের প্রথম ডিফল্ট স্টেট, যা রিডিউসারের প্রথম রান বা স্টোর ইনিশিয়ালাইজ হওয়ার সময় ব্যবহৃত হয়। রিডিউসার কখনোই সরাসরি স্টেট পরিবর্তন করে না, বরং নতুন স্টেট তৈরি করে। Immutability নিয়ম অনুসরণ করে, স্টেটের কোনো অংশ পরিবর্তন করার সময় একটি নতুন অবজেক্ট তৈরি করা হয়, যা স্টেটের পূর্ববর্তী অবস্থাকে অপরিবর্তিত রাখে।

Redux Toolkit Redux এর জন্য একটি আধুনিক এবং সহজ পদ্ধতি প্রদান করে, যা স্টেট ম্যানেজমেন্টকে আরও সুবিধাজনক, দ্রুত এবং কমপ্যাক্ট করে তোলে। Slice একটি নতুন ধারণা যা Redux Toolkit-এ ব্যবহার করা হয়। এটি একদিকে Reducers এবং অন্যদিকে Actions এর কাজ একসাথে সমন্বিত করে। Redux Toolkit এর মাধ্যমে অ্যাসিনক্রোনাস একশন হ্যান্ডল করতে createAsyncThunk এবং createSlice ব্যবহার করা হয়, যা কোডের পরিমাণ কমায় এবং স্টেট ম্যানেজমেন্টকে আরও সহজ করে তোলে।

Slice কী?

Slice হল Redux Toolkit এর একটি ফিচার, যা স্টেট, রিডিউসার এবং অ্যাকশনকে একটি একক ফিচারে সংযুক্ত করে। এটি অ্যাপ্লিকেশনের একটি নির্দিষ্ট অংশের জন্য কাজ করে। উদাহরণস্বরূপ, যদি আপনার অ্যাপ্লিকেশনটি টুডু লিস্ট পরিচালনা করে, তবে আপনি একটি todosSlice তৈরি করতে পারেন যেখানে টুডু স্টেট, একশন এবং রিডিউসার একত্রে থাকবে।

createSlice এবং createAsyncThunk

Redux Toolkit দুটি গুরুত্বপূর্ণ ফাংশন সরবরাহ করে: createSlice এবং createAsyncThunk, যা অ্যাসিনক্রোনাস একশন এবং রিডিউসার হ্যান্ডলিং সহজ করে।

createSlice

createSlice ফাংশন ব্যবহার করে আপনি state, reducers এবং actions একত্রে সংজ্ঞায়িত করতে পারেন। এটি স্বয়ংক্রিয়ভাবে একশন ক্রিয়েটর এবং রিডিউসার ফাংশন তৈরি করে দেয়।

createAsyncThunk

createAsyncThunk হল একটি থাঙ্ক একশন ক্রিয়েটর যা অ্যাসিনক্রোনাস কাজের জন্য ব্যবহৃত হয়, যেমন API কল। এটি তিনটি স্টেট তৈরি করে: pending, fulfilled, এবং rejected, যা API কলের অবস্থাকে ট্র্যাক করতে সহায়তা করে।

Slice এর মাধ্যমে Async Actions এবং Reducers হ্যান্ডল করার উদাহরণ

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন আছে যেখানে টুডু আইটেমের ডেটা API থেকে ফেচ করা হয়। আমরা createSlice এবং createAsyncThunk ব্যবহার করে একশন এবং রিডিউসার হ্যান্ডল করব।

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

প্রথমে, Redux Toolkit ইন্সটল করুন:

npm install @reduxjs/toolkit react-redux

২. createSlice এবং createAsyncThunk দিয়ে Slice তৈরি করা

এখন, createSlice এবং createAsyncThunk ব্যবহার করে অ্যাসিনক্রোনাস টুডু ফেচ করার জন্য একটি স্লাইস তৈরি করা যাক।

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

// Async action using createAsyncThunk
export const fetchTodos = createAsyncThunk(
  'todos/fetchTodos', 
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    return response.json();
  }
);

// Slice creation
const todosSlice = createSlice({
  name: 'todos',
  initialState: {
    todos: [],
    loading: false,
    error: null,
  },
  reducers: {
    // সাধারণ সিঙ্ক্রোনাস একশন
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.loading = false;
        state.todos = action.payload;
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

// Export actions and reducer
export const { addTodo } = todosSlice.actions;
export default todosSlice.reducer;

এখানে:

1. createAsyncThunk: এটি একটি অ্যাসিনক্রোনাস একশন ক্রিয়েটর, যা API কলের মাধ্যমে টুডু আইটেম ফেচ করে। pending, fulfilled, এবং rejected স্টেটগুলি স্বয়ংক্রিয়ভাবে তৈরি হয়।
2. createSlice: এটি একটি স্লাইস তৈরি করে যেখানে আমরা initialState, reducers (যেমন, addTodo), এবং extraReducers (অ্যাসিনক্রোনাস একশনের জন্য) ডিফাইন করি।

৩. Store তৈরি করা

এখন, আমরা Redux store তৈরি করে স্লাইস যোগ করব:

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './todosSlice';

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

export default store;

এখানে, আমরা configureStore ব্যবহার করে Redux store তৈরি করেছি এবং todosSlice.reducer স্লাইস যুক্ত করেছি।

৪. React কম্পোনেন্টে ডেটা ফেচ করা

এখন, আমাদের React কম্পোনেন্টে অ্যাসিনক্রোনাস ডেটা ফেচ এবং স্টেট আপডেট করতে হবে।

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchTodos, addTodo } from './todosSlice';

function TodoList() {
  const dispatch = useDispatch();
  const { todos, loading, error } = useSelector((state) => state.todos);

  useEffect(() => {
    dispatch(fetchTodos());
  }, [dispatch]);

  return (
    <div>
      <h1>Todo List</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
      <button onClick={() => dispatch(addTodo({ id: todos.length + 1, title: 'New Todo' }))}>
        Add Todo
      </button>
    </div>
  );
}

export default TodoList;

এখানে:

• আমরা useDispatch এবং useSelector ব্যবহার করে Redux স্টোর থেকে ডেটা নিয়ে এসেছি।
• useEffect ব্যবহার করে কম্পোনেন্ট লোড হওয়ার সাথে সাথে fetchTodos অ্যাকশন ডিসপ্যাচ করা হয়েছে।
• loading এবং error স্টেটের মাধ্যমে API কলের স্ট্যাটাস দেখানো হচ্ছে।

সারাংশ

Slice হল Redux Toolkit-এর একটি অত্যন্ত কার্যকরী ফিচার, যা Redux স্টেট, একশন এবং রিডিউসার একত্রে সংজ্ঞায়িত করে। createAsyncThunk ব্যবহার করে আমরা অ্যাসিনক্রোনাস একশন সহজে হ্যান্ডল করতে পারি, যেখানে pending, fulfilled, এবং rejected স্টেট ট্র্যাক করা হয়। Redux Toolkit-এ createSlice এবং createAsyncThunk ব্যবহার করার মাধ্যমে আমরা কম কোডে শক্তিশালী স্টেট ম্যানেজমেন্ট এবং অ্যাসিনক্রোনাস একশন পরিচালনা করতে পারি।