React Hooks এর মাধ্যমে Redux ব্যবহার করা

React Hooks এর মাধ্যমে Redux ব্যবহারের সুবিধা হলো, React কম্পোনেন্টে Redux স্টেট এবং ডিসপ্যাচিং একশন ব্যবহারের প্রক্রিয়াটি অনেক সহজ হয়ে যায়। Redux Toolkit এবং React-Redux লাইব্রেরি useSelector() এবং useDispatch() হুক দুটি প্রদান করে, যার মাধ্যমে Redux স্টেট অ্যাক্সেস এবং অ্যাকশন ডিসপ্যাচ করা অনেক সহজ হয়ে যায়।

এই পদ্ধতিতে, Redux এবং React এর মধ্যে যোগাযোগ আরও সোজা এবং আধুনিক React অ্যাপ্লিকেশনগুলির জন্য আরও উপযোগী হয়ে ওঠে।

useSelector হুক

useSelector হুকটি React কম্পোনেন্টে Redux স্টোরের স্টেট থেকে ডেটা পড়ার জন্য ব্যবহৃত হয়। এটি state প্যারামিটার গ্রহণ করে এবং স্টোরের স্টেট থেকে যেকোনো ডেটা ফিরিয়ে দেয়। এর মাধ্যমে Redux স্টেট অ্যাক্সেস করা হয়, যাতে কম্পোনেন্ট রেন্ডার হয় এবং সেই স্টেট পরিবর্তনের সাথে সিঙ্ক্রোনাইজ থাকে।

উদাহরণ:

import { useSelector } from 'react-redux';

function Counter() {
  // Redux স্টোরের স্টেট থেকে 'counter' ভ্যালু নিয়ে আসা
  const counter = useSelector((state) => state.counter.value);

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

এখানে:

• useSelector হুকটি state.counter.value থেকে ডেটা নিয়ে আসছে, যেখানে state হলো Redux স্টোরের স্টেট।
• যখনই Redux স্টেট পরিবর্তিত হবে, কম্পোনেন্টটি স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার হবে।

useDispatch হুক

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

উদাহরণ:

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

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

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

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

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

এখানে:

• useDispatch হুকটি dispatch ফাংশন রিটার্ন করে, যা অ্যাকশন ডিসপ্যাচ করার জন্য ব্যবহার করা হয়।
• increment এবং decrement একশনগুলি counterSlice থেকে আনা হয়েছে এবং dispatch ফাংশনের মাধ্যমে স্টোরে পাঠানো হচ্ছে।

Redux স্টোর কনফিগারেশন

React এবং Redux Hooks ব্যবহার করতে, প্রথমে আপনাকে Redux স্টোর কনফিগারেশন করতে হবে এবং React অ্যাপ্লিকেশনে স্টোরটি প্রোভাইড করতে হবে।

Redux স্টোর কনফিগারেশন করার জন্য, React-Redux এর Provider কম্পোনেন্ট ব্যবহার করতে হয়। এটি অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্টে Redux স্টোর অ্যাক্সেসের অনুমতি দেয়।

স্টোর কনফিগারেশন উদাহরণ:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import App from './App';

// Redux স্টোর তৈরি করা
const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

// React অ্যাপে Redux স্টোর প্রোভাইড করা
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

এখানে:

• Provider কম্পোনেন্টের মাধ্যমে Redux স্টোর অ্যাপের সব কম্পোনেন্টে পৌঁছানো যাচ্ছে।
• স্টোর কনফিগার করা হয়েছে counterReducer দিয়ে, যেটি counterSlice থেকে এসেছে।

পুরো উদাহরণ: React Hooks দিয়ে Redux ব্যবহারের সম্পূর্ণ উদাহরণ

এখন, পুরো উদাহরণ দেখে নেওয়া যাক যেখানে useSelector এবং useDispatch হুকসের মাধ্যমে Redux ব্যবহৃত হচ্ছে।

১. counterSlice.js (Redux Slice)

import { createSlice } from '@reduxjs/toolkit';

// Counter Slice তৈরি করা
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

২. App.js (React কম্পোনেন্ট)

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

function App() {
  // Redux স্টোর থেকে counter ভ্যালু পাওয়া
  const counter = useSelector((state) => state.counter.value);
  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 App;

৩. index.js (React অ্যাপ্লিকেশন শুরু)

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import App from './App';

// Redux স্টোর তৈরি করা
const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

// Redux স্টোর অ্যাপ্লিকেশনে প্রোভাইড করা
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

এখানে:

• counterSlice.js ফাইলের মধ্যে Redux slice তৈরি করা হয়েছে।
• App.js ফাইলে useSelector দিয়ে স্টেট অ্যাক্সেস করা হচ্ছে এবং useDispatch দিয়ে একশন ডিসপ্যাচ করা হচ্ছে।
• index.js ফাইলে Redux স্টোর কনফিগার করা হয়েছে এবং Provider কম্পোনেন্ট দিয়ে স্টোর অ্যাপ্লিকেশনে পাস করা হয়েছে।

সারাংশ

React Hooks দিয়ে Redux ব্যবহারের মাধ্যমে স্টেট ব্যবস্থাপনা সহজ এবং কম্পোনেন্ট ভিত্তিক হয়ে ওঠে। useSelector হুক দিয়ে Redux স্টোরের স্টেট পড়া এবং useDispatch হুক দিয়ে একশন ডিসপ্যাচ করা সম্ভব। Redux Toolkit ব্যবহার করলে Redux অ্যাপ্লিকেশন তৈরির প্রক্রিয়া আরও দ্রুত এবং কার্যকরী হয়ে ওঠে, বিশেষত যখন React Hooks ব্যবহার করা হয়। Provider কম্পোনেন্টের মাধ্যমে Redux স্টোর অ্যাপ্লিকেশনে সহজে যুক্ত করা যায়।

React Hooks হলো React ১৬.৮ এ চালু করা একটি নতুন বৈশিষ্ট্য, যা ক্লাস কম্পোনেন্টের পরিবর্তে ফাংশনাল কম্পোনেন্টে স্টেট, লাইফসাইকেল এবং অন্যান্য React ফিচার ব্যবহার করার সুবিধা দেয়। এটি React অ্যাপ্লিকেশনে ফাংশনাল কম্পোনেন্টের মাধ্যমে আরও সহজ এবং কার্যকরী কোড লেখার সুযোগ সৃষ্টি করেছে।

এর আগে, React এ ক্লাস কম্পোনেন্ট ব্যবহার করতে হত যাতে স্টেট ম্যানেজমেন্ট, লাইফসাইকেল মেথড এবং অন্যান্য ফিচার ব্যবহার করা যায়। তবে Hooks-এর মাধ্যমে, এই সব ফিচার ফাংশনাল কম্পোনেন্টে সহজেই অ্যাক্সেস করা সম্ভব হয়েছে, যা কোডকে আরও সিম্পল, ক্লিন এবং মেইনটেইনেবল করে।

React Hooks-এর মূল ফিচারসমূহ

React Hooks বেশ কয়েকটি প্রাথমিক ফিচারের মাধ্যমে ফাংশনাল কম্পোনেন্টে স্টেট, সাইড-ইফেক্ট এবং অন্যান্য ফিচার ব্যবহারের সুযোগ দেয়। এখানে কিছু জনপ্রিয় React Hooks এর আলোচনা করা হলো:

১. useState (স্টেট হুক)

useState হুকটি ফাংশনাল কম্পোনেন্টে স্টেট ব্যবহারের জন্য ব্যবহৃত হয়। এর মাধ্যমে, আপনি কম্পোনেন্টের মধ্যে স্টেট সংরক্ষণ এবং আপডেট করতে পারেন।

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // স্টেট পরিবর্তন

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

এখানে:

• count: স্টেটের বর্তমান মান
• setCount: স্টেট আপডেট করার ফাংশন
• useState(0): useState হুকের মাধ্যমে স্টেট 0 দিয়ে ইনিশিয়ালাইজ করা হয়েছে।

২. useEffect (এফেক্ট হুক)

useEffect হুকটি কম্পোনেন্টের সাইড-ইফেক্ট (যেমন, API কল, DOM ম্যানিপুলেশন, সাবস্ক্রিপশন, টাইমার ইত্যাদি) পরিচালনার জন্য ব্যবহৃত হয়। এটি React কম্পোনেন্টে লাইফসাইকেল মেথডের মতো কাজ করে, যেমন componentDidMount, componentDidUpdate, এবং componentWillUnmount।

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs only once (like componentDidMount)

  return <p>Seconds: {seconds}</p>;
}

এখানে:

• useEffect ব্যবহার করে প্রতি সেকেন্ডে টাইমার বাড়ানোর কার্যক্রম করা হচ্ছে।
• সাফ (cleanup) ফাংশন ব্যবহৃত হয়েছে, যাতে কম্পোনেন্টটি আনমাউন্ট হলে টাইমার বন্ধ হয়ে যায়।

৩. useContext (কন্টেক্সট হুক)

useContext হুকটি React কন্টেক্সট API ব্যবহার করার জন্য ব্যবহৃত হয়। এটি পারেন্ট কম্পোনেন্ট থেকে কোনো কন্টেক্সট মান (value) নিয়ে ফাংশনাল কম্পোনেন্টে সরাসরি ব্যবহারের সুযোগ দেয়।

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  
  return <div>The current theme is {theme}</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

এখানে:

• useContext ব্যবহার করে ThemeContext থেকে theme মান নিয়ে ব্যবহার করা হয়েছে।

৪. useReducer (রিডিউসার হুক)

useReducer হুকটি স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, বিশেষ করে যখন স্টেটের পরিবর্তন গুলি বেশি কমপ্লেক্স বা ডিপেন্ডেন্ট থাকে। এটি Redux-এর রিডিউসার এবং একশন কনসেপ্টের মতো কাজ করে।

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

এখানে:

• useReducer হুকের মাধ্যমে স্টেটের পরিবর্তন পরিচালিত হচ্ছে, যেটি রিডিউসার এবং একশন ব্যবহার করে কাজ করে।

৫. useRef (রেফারেন্স হুক)

useRef হুকটি ডম (DOM) এলিমেন্ট বা যেকোনো মানকে রেফারেন্স করার জন্য ব্যবহৃত হয়। এটি স্টেটের মত পুনরায় রেন্ডার করার জন্য ব্যবহৃত হয় না, বরং এটি একটি স্থির মান ধরে রাখে।

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // ইনপুট ফিল্ডে ফোকাস করা
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus the input</button>
    </div>
  );
}

এখানে:

• useRef ব্যবহার করে ইনপুট ফিল্ডের রেফারেন্স তৈরি করা হয়েছে, এবং বোতাম ক্লিক করলে ইনপুট ফিল্ডে ফোকাস করা হয়।

React Hooks কেন গুরুত্বপূর্ণ?

1. ফাংশনাল কম্পোনেন্টে স্টেট ব্যবহারের সুবিধা
   React Hooks ফাংশনাল কম্পোনেন্টে স্টেট এবং অন্যান্য ফিচার ব্যবহার করার সুযোগ দেয়। এটি ক্লাস কম্পোনেন্টের পরিবর্তে ফাংশনাল কম্পোনেন্টকে শক্তিশালী করে তোলে।
2. কোড কম্প্যাক্ট ও পরিষ্কার
   Hooks ব্যবহারে কোড অনেক কমপ্যাক্ট এবং পরিষ্কার হয়। ক্লাস কম্পোনেন্টের তুলনায় ফাংশনাল কম্পোনেন্টে অনেক কম কোড লিখতে হয়, যা মেইনটেইন করা সহজ।
3. লাইফসাইকেল মেথড সহজে ব্যবহার করা
   useEffect হুকটি লাইফসাইকেল মেথড যেমন componentDidMount, componentDidUpdate এবং componentWillUnmount এর কার্যকারিতা ফাংশনাল কম্পোনেন্টে সরাসরি প্রদান করে, যা কোড সহজতর করে।
4. স্টেট ম্যানেজমেন্ট আরও শক্তিশালী
   useReducer হুকটি বেশি জটিল স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, এবং এটি রিডিউসার প্যাটার্নের মতো কাজ করে, যা Redux-এ ব্যবহৃত হয়। এটি বড় প্রোজেক্টে স্টেট ব্যবস্থাপনা আরও সুসংগঠিত রাখে।
5. রেফারেন্স ম্যানেজমেন্ট
   useRef হুকটি স্টেট বা রেন্ডার ছাড়া ডম এলিমেন্টের রেফারেন্স রাখার সুবিধা দেয়, যা কোনো রেন্ডার ইফেক্ট ছাড়াই এলিমেন্টের সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করে।
6. আরও ইউজারফ্রেন্ডলি
   React Hooks ডেভেলপারদের জন্য আরও ইউজারফ্রেন্ডলি। কোড সরল, কমপ্লেক্সিটি কম, এবং দ্রুত নতুন ফিচার সংযোজনের সুযোগ থাকে।

সারাংশ

React Hooks হল React এর শক্তিশালী একটি বৈশিষ্ট্য যা ফাংশনাল কম্পোনেন্টে স্টেট এবং অন্যান্য লাইফসাইকেল ফিচার ব্যবহার করতে সাহায্য করে। useState, useEffect, useReducer, useRef, এবং useContext এর মতো হুকগুলি React কম্পোনেন্টগুলিকে আরও শক্তিশালী এবং কার্যকরী করে তোলে। React Hooks ব্যবহারের মাধ্যমে কোড আরও কমপ্যাক্ট, পরিষ্কার এবং মেইনটেইনেবল হয়, এবং এটি ডেভ

েলপারদের জন্য দ্রুত এবং উন্নত অ্যাপ্লিকেশন ডেভেলপমেন্টে সহায়ক।

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 দিয়ে আমরা স্টেটে পরিবর্তন আনার জন্য অ্যাকশন পাঠাতে পারি।

Redux সাধারণত React অ্যাপ্লিকেশনে state management এর জন্য ব্যবহৃত হয়। Redux-এর মাধ্যমে অ্যাপ্লিকেশনের স্টেট একত্রিত করা হয় এবং সেন্ট্রালাইজড ভাবে পরিচালিত হয়। যদি আপনি functional components ব্যবহার করেন, তবে Redux এর স্টেট ম্যানেজমেন্ট এবং action dispatch এর মাধ্যমে স্টেট আপডেট করা খুবই সহজ এবং কার্যকর।

React-Redux লাইব্রেরি Redux কে React এর সাথে সহজভাবে সংযুক্ত করতে সহায়তা করে। এই লাইব্রেরি দুটি প্রধান হুক প্রদান করে: useDispatch এবং useSelector, যেগুলোর মাধ্যমে functional components এর মধ্যে Redux ব্যবহারের প্রক্রিয়া সম্পন্ন হয়।

React Functional Components এ Redux ব্যবহারের প্রধান ধাপ

1. Redux Store তৈরি করা এবং কনফিগার করা
   প্রথমে Redux স্টোর তৈরি করা হয় এবং রিডিউসার সংযুক্ত করা হয়।
2. Redux Provider দিয়ে অ্যাপ্লিকেশনকে র‍্যাপ করা
   React-Redux লাইব্রেরির Provider কম্পোনেন্টের মাধ্যমে স্টোরটি অ্যাপ্লিকেশনকে প্রদান করা হয়।
3. State অ্যাক্সেস করা useSelector হুকের মাধ্যমে
   অ্যাপ্লিকেশনের স্টেট useSelector হুক ব্যবহার করে Redux স্টোর থেকে অ্যাক্সেস করা হয়।
4. Action Dispatch করা useDispatch হুকের মাধ্যমে
   useDispatch হুক ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা হয় এবং স্টেটে পরিবর্তন আনা হয়।

Step-by-Step উদাহরণ

ধরা যাক, আমাদের একটি কাউন্টার অ্যাপ্লিকেশন আছে এবং আমরা Redux ব্যবহার করে স্টেট ম্যানেজ করবো।

1. Redux Store তৈরি এবং কনফিগার করা

প্রথমে আমাদের একটি স্লাইস তৈরি করতে হবে যেটি কাউন্টার স্টেট পরিচালনা করবে।

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

এখানে:

• createSlice ফাংশনটি ব্যবহার করে কাউন্টার স্টেট তৈরি করা হয়েছে এবং increment এবং decrement অ্যাকশনগুলো সংজ্ঞায়িত করা হয়েছে।

Redux Store তৈরি করা:

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

export default store;

2. Redux Provider দিয়ে অ্যাপ্লিকেশনকে র‍্যাপ করা

Redux স্টোরটি অ্যাপ্লিকেশনের মধ্যে পাঠানোর জন্য, Provider কম্পোনেন্ট ব্যবহার করতে হয়, যা React অ্যাপ্লিকেশনকে Redux স্টোর প্রদান করবে।

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

এখানে, store এ আমাদের তৈরি করা Redux স্টোর এবং Provider এর মাধ্যমে এটি পুরো অ্যাপ্লিকেশনকে সরবরাহ করা হয়েছে।

3. useSelector হুক দিয়ে State অ্যাক্সেস করা

useSelector হুক ব্যবহার করে Redux স্টোর থেকে স্টেটের মান অ্যাক্সেস করা যায়। useSelector ফাংশনটি স্টেটের সাবসেট প্রদান করে এবং এই মানটি রেন্ডার করা হয়।

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

function Counter() {
  // useSelector হুক ব্যবহার করে কাউন্টার স্টেট অ্যাক্সেস করা
  const count = useSelector((state) => state.counter.value);

  // useDispatch হুক ব্যবহার করে ডিসপ্যাচ ফাংশন অ্যাক্সেস করা
  const dispatch = useDispatch();

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

export default Counter;

এখানে:

• useSelector হুকটি state.counter.value থেকে কাউন্টার স্টেটের মান সংগ্রহ করছে।
• useDispatch হুকটি অ্যাকশন ডিসপ্যাচ করতে ব্যবহৃত হচ্ছে (increment ও decrement অ্যাকশন)।

4. Action Dispatch করা useDispatch হুকের মাধ্যমে

useDispatch হুক Redux স্টোর থেকে ডিসপ্যাচ ফাংশনটি গ্রহণ করে, যা Redux স্টেটে পরিবর্তন আনার জন্য ব্যবহৃত হয়।

উপরের Counter কম্পোনেন্টে, দুটি বাটন ক্লিক করলে increment এবং decrement অ্যাকশন ডিসপ্যাচ হবে এবং স্টেট আপডেট হবে।

Full Example কোড:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

export default store;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

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

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

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

export default Counter;

সারাংশ

Redux ব্যবহারের মাধ্যমে React-এ স্টেট ম্যানেজমেন্ট অনেক সহজ এবং কার্যকরী হয়ে ওঠে। useSelector এবং useDispatch হুকগুলোর মাধ্যমে functional components এর মধ্যে Redux স্টোরের স্টেট অ্যাক্সেস এবং অ্যাকশন ডিসপ্যাচ করা খুবই সোজা। Provider কম্পোনেন্টের মাধ্যমে স্টোর পুরো অ্যাপ্লিকেশনকে সরবরাহ করা হয়। Redux স্টোর এবং স্লাইস ব্যবহারের মাধ্যমে অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস স্টেট ম্যানেজমেন্ট দক্ষতার সাথে করা যায়।

React অ্যাপ্লিকেশন তৈরি করার সময়, props এবং state দুটি গুরুত্বপূর্ণ কনসেপ্ট। State একটি কম্পোনেন্টের অভ্যন্তরীণ ডাটা ধারণ করে এবং props কম্পোনেন্টগুলির মধ্যে ডাটা প্রেরণের জন্য ব্যবহৃত হয়। Redux স্টেট ম্যানেজমেন্ট, একটি অ্যাপ্লিকেশনের global state পরিচালনা করার জন্য ব্যবহৃত হয়। কিন্তু যখন Redux স্টেট এবং React কম্পোনেন্টের props একসঙ্গে ব্যবহৃত হয়, তখন তাদের মধ্যে সমন্বয় কিভাবে করা যায়, তা জানা প্রয়োজন।

এখানে, Redux স্টেট এবং React props এর মধ্যে কীভাবে সমন্বয় করা যায়, তার বিস্তারিত আলোচনা করা হবে।

Redux State এবং React Props এর মধ্যে পার্থক্য

• Redux State: এটি অ্যাপ্লিকেশন সারা জুড়ে শেয়ার করা স্টেট। Redux স্টেট সাধারণত store তে থাকে এবং সমস্ত কম্পোনেন্টের জন্য অ্যাক্সেসযোগ্য হয়।
• React Props: এটি শুধুমাত্র প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডাটা প্রেরণের জন্য ব্যবহৃত হয়। Props একটি কম্পোনেন্টের অভ্যন্তরে শুধুমাত্র প্যারেন্ট কম্পোনেন্টের দ্বারা পাস করা হয়।

Redux স্টেট মূলত অ্যাপ্লিকেশন এর global state হিসাবে কাজ করে, যেখানে props শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের মধ্যে ডাটা আদান-প্রদান করে।

Redux State কে Props হিসেবে কম্পোনেন্টে ব্যবহার করা

React কম্পোনেন্টে Redux স্টেট ব্যবহার করার জন্য useSelector() হুক ব্যবহার করা হয়। এই হুকটি আপনাকে Redux স্টোর থেকে স্টেট এনে কম্পোনেন্টের props হিসেবে পাঠাতে সাহায্য করে।

উদাহরণ:

ধরা যাক, একটি অ্যাপ্লিকেশন যেখানে আমরা Todo List দেখাচ্ছি এবং Todo এর লিস্ট Redux স্টেট থেকে আসবে।

Redux স্লাইস (todoSlice.js):

import { createSlice } from '@reduxjs/toolkit';

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;

স্টোর কনফিগারেশন (store.js):

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice';

const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

export default store;

React কম্পোনেন্টে Redux স্টেট ব্যবহার করা:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, removeTodo } from './todoSlice';

const TodoApp = () => {
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos);

  const handleAddTodo = (text) => {
    const newTodo = { id: Date.now(), text };
    dispatch(addTodo(newTodo));
  };

  const handleRemoveTodo = (id) => {
    dispatch(removeTodo({ id }));
  };

  return (
    <div>
      <button onClick={() => handleAddTodo('Learn Redux')}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => handleRemoveTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

এখানে:

• useSelector() হুক ব্যবহার করে Redux স্টেট থেকে todos সংগ্রহ করা হচ্ছে এবং এটি কম্পোনেন্টের props হিসেবে ব্যবহৃত হচ্ছে।
• useDispatch() হুক ব্যবহার করে addTodo এবং removeTodo একশন ডিসপ্যাচ করা হচ্ছে।

Redux State এবং Props এর মধ্যে সমন্বয়

Redux স্টেট এবং React Props একসঙ্গে ব্যবহারের সময়, Redux স্টেটকে React কম্পোনেন্টের props হিসেবে অ্যাসাইন করা হয় এবং যে কোনো পরিবর্তন (যেমন নতুন Todo যোগ করা) Redux স্টেটে আপডেট হয়।

Redux স্টেট থেকে Props এ ডাটা পাঠানো:

Redux স্টেট সাধারণত useSelector() হুক ব্যবহার করে কম্পোনেন্টে পৌঁছানো হয়। useSelector() Redux স্টেটের নির্দিষ্ট অংশকে নির্বাচিত (select) করে React কম্পোনেন্টে পাঠায়, এবং এটি props হিসেবে ব্যবহৃত হয়। যখন Redux স্টেট পরিবর্তিত হয়, তখন React কম্পোনেন্টে props স্বয়ংক্রিয়ভাবে আপডেট হয়।

Props এর মাধ্যমে একশন Dispatcher:

যখন Redux স্টেটে কোনো পরিবর্তন করার দরকার হয়, তখন dispatch ফাংশন ব্যবহার করা হয়। এই ফাংশনটি একটি একশনকে ডিসপ্যাচ করে এবং রিডিউসার সেই একশনটি হ্যান্ডেল করে স্টেট পরিবর্তন করে।

Redux State এবং Props এর মধ্যে সম্পর্ক এবং প্রভাব

Redux স্টেট এবং Props এর মধ্যে সম্পর্ক বোঝা প্রয়োজন যখন আপনি একটি অ্যাপ্লিকেশনে Redux ব্যবহার করছেন। কিছু মূল পয়েন্ট এখানে তুলে ধরা হলো:

1. Redux State আপনার অ্যাপ্লিকেশনের global state এবং এটি সকল কম্পোনেন্টের মধ্যে শেয়ার করা যায়।
2. Props শুধুমাত্র এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডাটা পাঠানোর জন্য ব্যবহৃত হয়।
3. Redux স্টেটকে React props হিসেবে ব্যবহার করার মাধ্যমে আপনি গ্লোবাল স্টেটকে আপনার UI কম্পোনেন্টে অন্তর্ভুক্ত করতে পারেন।
4. যখন Redux স্টেট পরিবর্তন হয়, তখন React কম্পোনেন্টগুলোর props স্বয়ংক্রিয়ভাবে আপডেট হয়, কারণ Redux স্টেটকে React props হিসেবে সরবরাহ করা হয়।
5. React কম্পোনেন্টে props পরিবর্তন বা আপডেট করার জন্য dispatch ফাংশন ব্যবহার করা হয় যা Redux স্টেটে পরিবর্তন আনে।

Redux State এবং Props এর মধ্যে সঠিক সমন্বয় করা

Redux এবং React Props এর সঠিক সমন্বয় করার জন্য কিছু গুরুত্বপূর্ণ টিপস:

1. Props Through Dispatch: যখন আপনাকে স্টেট পরিবর্তন করতে হয়, তখন props এর মাধ্যমে একশন ডিসপ্যাচ করুন। React কম্পোনেন্টে props আকারে একশন পাস করে এটি Redux স্টেট পরিবর্তন করবে।
2. Local State vs Redux State: যদি কোনো ডাটা শুধুমাত্র এক কম্পোনেন্টের মধ্যে ব্যবহৃত হয়, তাহলে এটি কম্পোনেন্টের local state হিসাবে রাখতে পারেন। তবে যদি ডাটা একাধিক কম্পোনেন্টে শেয়ার করতে হয়, তাহলে সেটি Redux state এ রাখতে হবে।
3. Memoization: useSelector() হুক ব্যবহারের সময়, আপনার সিলেক্টর ফাংশনগুলো মেমোইজড (memoized) রাখা উচিত যাতে unnecessary re-renders এড়ানো যায়।

সারাংশ

Redux স্টেট এবং React props এর সমন্বয় করার মাধ্যমে আপনি অ্যাপ্লিকেশনের গ্লোবাল স্টেটকে সহজভাবে React কম্পোনেন্টে অন্তর্ভুক্ত করতে পারেন। useSelector() হুক Redux স্টেটকে props হিসেবে কম্পোনেন্টে পাঠায়, এবং useDispatch() হুক ব্যবহার করে স্টেট পরিবর্তন করতে একশন ডিস্ট্রিবিউট করা হয়। এইভাবে Redux স্টেট এবং React props এর মধ্যে কার্যকরী সমন্বয় করা যায়, যা অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট এবং ডাটা ফ্লোকে সহজ ও স্বচ্ছ করে তোলে।