useSelector এবং useDispatch এর মাধ্যমে Redux Data হ্যান্ডল করা

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

useSelector কী?

useSelector হল Redux স্টোর থেকে ডেটা রিড করার জন্য একটি হুক। এটি আপনার অ্যাপ্লিকেশনের স্টেট থেকে নির্দিষ্ট ডেটা নির্বাচন করতে সাহায্য করে।

useSelector এর সিনট্যাক্স:

import { useSelector } from 'react-redux';

const data = useSelector((state) => state.someData);

এখানে, state Redux স্টোরের পূর্ণ অবস্থা (state) এবং state.someData হল স্টোরের নির্দিষ্ট অংশ বা স্টেট থেকে ডেটা অ্যাক্সেস করার পদ্ধতি।

useDispatch কী?

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

useDispatch এর সিনট্যাক্স:

import { useDispatch } from 'react-redux';

const dispatch = useDispatch();

// অ্যাকশন ডিসপ্যাচ করার উদাহরণ
dispatch({ type: 'UPDATE_DATA', payload: newData });

এখানে, dispatch হল একটি ফাংশন যা Redux অ্যাকশনগুলো স্টোরে পাঠায়।

Redux এর মাধ্যমে Data হ্যান্ডল করার উদাহরণ

১. Redux Store এবং Reducer Setup

প্রথমে আমাদের একটি Redux স্টোর এবং রিডিউসার তৈরি করতে হবে। উদাহরণস্বরূপ, আমাদের একটি counter অ্যাপ্লিকেশন তৈরি করছি, যেখানে স্টেটের মান বাড়ানো বা কমানোর জন্য Redux ব্যবহার করা হবে।

actions.js:

export const increment = () => {
  return { type: 'INCREMENT' };
};

export const decrement = () => {
  return { type: 'DECREMENT' };
};

reducer.js:

const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

store.js:

import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

২. React কম্পোনেন্টে useSelector এবং useDispatch ব্যবহার করা

এখন, useSelector এবং useDispatch হুক ব্যবহার করে আমাদের React কম্পোনেন্টে Redux ডেটা হ্যান্ডল করি।

App.js:

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

function App() {
  // Redux স্টোর থেকে ডেটা রিড করা
  const count = useSelector((state) => state.count);

  // Redux স্টোরে অ্যাকশন পাঠানো
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

এখানে:

1. useSelector: useSelector হুক ব্যবহার করে আমরা Redux স্টোর থেকে count মানটি রিড করছি।
2. useDispatch: useDispatch হুকের মাধ্যমে আমরা অ্যাকশন ডিসপ্যাচ করছি (increment এবং decrement)।

পুরো প্রকল্পের সেটআপ

এখন, পুরো প্রোজেক্টটি স্টোর এবং কম্পোনেন্ট সহ দেখতে কেমন হবে:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

এখানে:

• Provider: Provider কম্পোনেন্টটি Redux স্টোরকে পুরো অ্যাপ্লিকেশন কম্পোনেন্টে প্রোভাইড করে দেয়, যাতে অন্য সব কম্পোনেন্ট Redux স্টোর অ্যাক্সেস করতে পারে।

উপসংহার

ReactJS-এ useSelector এবং useDispatch হুক ব্যবহার করে Redux স্টোর থেকে ডেটা রিড এবং ডিসপ্যাচ করার প্রক্রিয়া সহজ হয়। useSelector স্টোর থেকে ডেটা পাওয়ার জন্য এবং useDispatch স্টোরে অ্যাকশন পাঠানোর জন্য ব্যবহৃত হয়। Redux ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনটির স্টেটকে কেন্দ্রীয়ভাবে এবং কার্যকরভাবে পরিচালনা করতে পারবেন।