Web Development Redux Toolkit এর মাধ্যমে Simplified Redux Structure গাইড ও নোট

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 স্টেট ম্যানেজমেন্ট এবং অ্যাপ্লিকেশন কাঠামো সহজ করা হয়, যা ডেভেলপারদের কম কোড লিখে আরও কার্যকরী অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।