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 ব্যবহারকারীকে আরও সুবিধা দেয়।