Web Development useSelector এবং useDispatch হুক গাইড ও নোট

Redux-এ স্টেট পরিচালনার জন্য React কম্পোনেন্টে useSelector এবং useDispatch হুক ব্যবহৃত হয়। এগুলি React-Redux লাইব্রেরির অংশ, যা Redux স্টোরের সাথে React কম্পোনেন্টগুলোকে সংযুক্ত করতে সাহায্য করে।

• useSelector হুক ব্যবহার করে Redux স্টোর থেকে স্টেট পড়া হয়।
• useDispatch হুক ব্যবহার করে Redux স্টোরে অ্যাকশন ডিসপ্যাচ করা হয়।

এই হুকগুলো React কম্পোনেন্টে Redux-এর স্টেট ম্যানেজমেন্টের কার্যকারিতা খুব সহজভাবে ইন্টিগ্রেট করতে সাহায্য করে।

useSelector হুক

useSelector হুকটি Redux স্টোর থেকে স্টেট পড়তে ব্যবহৃত হয়। এটি স্টোরের পুরো স্টেট অবজেক্টের মধ্যে থেকে আপনি যেটি চান, সেটি সিলেক্ট করে রিটার্ন করে।

useSelector এর ব্যবহার:

import { useSelector } from 'react-redux';

function MyComponent() {
  // Redux store থেকে counter স্টেট গ্রহণ
  const counter = useSelector((state) => state.counter.counter);

  return (
    <div>
      <h1>Counter Value: {counter}</h1>
    </div>
  );
}

এখানে:

• useSelector একটি ফাংশন নেয় যা স্টোরের পুরো স্টেট অবজেক্ট থেকে যে অংশটি আপনি চাচ্ছেন তা রিটার্ন করে।
• state.counter.counter মাধ্যমে আপনি স্টোরের counter স্লাইসের ভ্যালু অ্যাক্সেস করতে পারেন (যদি counter স্লাইসের মধ্যে counter নামে একটি প্রপার্টি থাকে)।

useSelector হুকের বৈশিষ্ট্য

1. স্টেট রিডিং: useSelector আপনাকে Redux স্টোর থেকে নির্দিষ্ট স্টেট রিড করতে দেয়।
2. প্রতিক্রিয়া: এটি আপনার কম্পোনেন্টকে রি-রেন্ডার করবে যখন স্টেটের মান পরিবর্তিত হবে। (React-এর useEffect এর মতো)
3. শুধুমাত্র প্রয়োজনীয় স্টেট: আপনি সম্পূর্ণ স্টেট না নিয়ে শুধুমাত্র প্রয়োজনীয় স্টেট নিতে পারবেন, যা পারফরমেন্সের দিক থেকে কার্যকরী।

useDispatch হুক

useDispatch হুকটি Redux স্টোরে অ্যাকশন পাঠাতে ব্যবহৃত হয়। এটি dispatch ফাংশন রিটার্ন করে, যা অ্যাকশন ডিসপ্যাচ করতে ব্যবহৃত হয়।

useDispatch এর ব্যবহার:

import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

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

  const incrementCounter = () => {
    dispatch(increment()); // Dispatching the increment action
  };

  const decrementCounter = () => {
    dispatch(decrement()); // Dispatching the decrement action
  };

  return (
    <div>
      <button onClick={incrementCounter}>Increment</button>
      <button onClick={decrementCounter}>Decrement</button>
    </div>
  );
}

এখানে:

• useDispatch হুকটি Redux স্টোরের dispatch ফাংশন রিটার্ন করে।
• increment() এবং decrement() অ্যাকশনগুলো স্লাইসের মাধ্যমে তৈরি করা হয়েছে এবং dispatch ফাংশন ব্যবহার করে এগুলো স্টোরে পাঠানো হচ্ছে।

useDispatch হুকের বৈশিষ্ট্য

1. অ্যাকশন ডিসপ্যাচ: useDispatch Redux স্টোরে অ্যাকশন ডিসপ্যাচ করার সুবিধা দেয়।
2. এটি একটি ফাংশন রিটার্ন করে: dispatch ফাংশনটি ব্যবহার করে স্টোরে অ্যাকশন পাঠানো যায়।
3. পাশে অ্যাকশন পাস করা: অ্যাকশন ক্রিয়েটর (যেমন increment, decrement) dispatch ফাংশনের মাধ্যমে স্টোরে পাঠানো হয়।

useSelector এবং useDispatch একসাথে ব্যবহার করা

এখন, আমরা দেখবো কিভাবে useSelector এবং useDispatch একসাথে ব্যবহার করে একটি পূর্ণাঙ্গ কম্পোনেন্ট তৈরি করা যায়।

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

function Counter() {
  const counter = useSelector((state) => state.counter.counter); // স্টোর থেকে স্টেট পড়া
  const dispatch = useDispatch(); // স্টোরে অ্যাকশন ডিসপ্যাচ করা

  const handleIncrement = () => {
    dispatch(increment()); // ইনক্রিমেন্ট অ্যাকশন ডিসপ্যাচ
  };

  const handleDecrement = () => {
    dispatch(decrement()); // ডিক্রিমেন্ট অ্যাকশন ডিসপ্যাচ
  };

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

এখানে:

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

useSelector এবং useDispatch এর মধ্যে পার্থক্য

• useSelector: এটি Redux স্টোর থেকে স্টেট রিড করতে ব্যবহৃত হয়। এটি স্টোরের কোন ভ্যালু থেকে আপনি তথ্য নিবেন, সেটি নির্ধারণ করে।
• useDispatch: এটি স্টোরে অ্যাকশন ডিসপ্যাচ করতে ব্যবহৃত হয়। এটি স্টোরে অ্যাকশন পাঠানোর জন্য একটি ফাংশন প্রদান করে।

সারাংশ

Redux-এ স্টেট ব্যবস্থাপনা সহজ করতে useSelector এবং useDispatch হুক অত্যন্ত গুরুত্বপূর্ণ। useSelector স্টোর থেকে স্টেট রিড করতে ব্যবহৃত হয়, এবং useDispatch স্টোরে অ্যাকশন ডিসপ্যাচ করতে ব্যবহৃত হয়। এগুলো React কম্পোনেন্টে Redux স্টোরের সাথে সংযোগ স্থাপন করে, যা React অ্যাপ্লিকেশনে স্টেট ম্যানেজমেন্ট অনেক সহজ করে তোলে। useSelector দিয়ে আমরা স্টোরের স্টেট অ্যাক্সেস করতে পারি, এবং useDispatch দিয়ে আমরা স্টেটে পরিবর্তন আনার জন্য অ্যাকশন পাঠাতে পারি।