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

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 ব্যবহার করার মাধ্যমে আমরা কম কোডে শক্তিশালী স্টেট ম্যানেজমেন্ট এবং অ্যাসিনক্রোনাস একশন পরিচালনা করতে পারি।