Web Development Redux এবং React Integration গাইড ও নোট

React এবং Redux একসাথে ব্যবহার করলে আপনি একটি শক্তিশালী State Management সিস্টেম তৈরি করতে পারেন। React হলো একটি UI লাইব্রেরি, যা ব্যবহারকারীর ইন্টারফেস তৈরি করে, আর Redux হলো একটি State Management লাইব্রেরি, যা অ্যাপ্লিকেশনের স্টেট ম্যানেজ করতে সাহায্য করে। React এবং Redux একত্রে ব্যবহারের মাধ্যমে, আপনি অ্যাপ্লিকেশনের স্টেটকে কন্ট্রোল করতে পারবেন এবং UI উপাদানগুলির সাথে স্টেটের পরিবর্তন দ্রুত এবং কার্যকরভাবে সিঙ্ক করতে পারবেন।

Redux এবং React এর মধ্যে ইন্টিগ্রেশন

React এবং Redux একত্রে ব্যবহারের জন্য, কিছু নির্দিষ্ট স্টেপ অনুসরণ করতে হয়। এর মধ্যে প্রধানত Redux Store তৈরি, Provider কনফিগার করা, এবং React components এর মধ্যে Redux স্টেট ব্যবহার করা অন্তর্ভুক্ত।

Redux Store তৈরি করা

Redux স্টোর হলো এমন একটি স্থান যেখানে অ্যাপ্লিকেশনের সমস্ত স্টেট রাখা হয়। প্রথমে, আপনার অ্যাপ্লিকেশনের জন্য একটি Redux স্টোর তৈরি করতে হবে।

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

import { createStore } from 'redux';

// Reducer ফাংশন
const rootReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// Redux স্টোর তৈরি
const store = createStore(rootReducer);

এখানে:

• rootReducer হলো আপনার রিডিউসার, যা অ্যাপ্লিকেশনের স্টেট পরিবর্তন করবে।
• createStore ফাংশন দিয়ে Redux স্টোর তৈরি করা হয়েছে।

Redux Store React Component এ ব্যবহার করা

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

1. React-Redux ইন্সটল করা: প্রথমে, আপনাকে react-redux লাইব্রেরিটি ইন্সটল করতে হবে:

   npm install react-redux
   

2. Redux Store কে React অ্যাপ্লিকেশনের সাথে যুক্ত করা:

   Provider কম্পোনেন্ট ব্যবহার করে React অ্যাপ্লিকেশনের উপরে Redux স্টোর প্রোভাইড করতে হবে।

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import { createStore } from 'redux';
   import App from './App'; // আপনার প্রধান React কম্পোনেন্ট
   
   // Reducer ফাংশন
   const rootReducer = (state = { count: 0 }, action) => {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + 1 };
       case 'DECREMENT':
         return { ...state, count: state.count - 1 };
       default:
         return state;
     }
   };
   
   // Redux স্টোর তৈরি
   const store = createStore(rootReducer);
   
   // React অ্যাপ্লিকেশনে Redux স্টোর প্রদান করা
   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );
   

এখানে:

• Provider কম্পোনেন্টটি Redux স্টোরকে React অ্যাপ্লিকেশনটির উপরে প্রোভাইড করে দেয়।
• store হলো আপনার তৈরি করা Redux স্টোর।

React Component-এ Redux State ব্যবহার করা

React কম্পোনেন্টে Redux স্টেট ব্যবহার করতে useSelector এবং useDispatch হুক ব্যবহার করা হয়।

1. useSelector: Redux স্টোর থেকে স্টেট অ্যাক্সেস করতে ব্যবহৃত হয়।
2. useDispatch: Redux স্টোরে একশন পাঠাতে ব্যবহৃত হয়।

উদাহরণ:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  // useSelector দিয়ে Redux স্টোর থেকে স্টেট নেওয়া
  const count = useSelector(state => state.count);

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

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

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

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

export default Counter;

এখানে:

• useSelector হুকটি Redux স্টোরের স্টেট থেকে count মান বের করে।
• useDispatch হুকটি একশন INCREMENT এবং DECREMENT ডিসপ্যাচ করে।

connect HOC ব্যবহার করা (Class Components এর জন্য)

React Redux লাইব্রেরিতে connect হল একটি Higher-Order Component (HOC), যা Redux স্টোর থেকে স্টেট এবং একশন ক্রিয়েটর কম্পোনেন্টে পাস করে। এটি ক্লাস কম্পোনেন্টের জন্য ব্যবহৃত হয়, যেহেতু হুকগুলি শুধুমাত্র ফাংশনাল কম্পোনেন্টে কাজ করে।

connect ব্যবহার করার উদাহরণ:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Counter extends Component {
  render() {
    const { count, increment, decrement } = this.props;

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

const mapStateToProps = state => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
};

// `connect` ব্যবহার করে Redux স্টেট এবং একশন পাস করা
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

এখানে:

• mapStateToProps: Redux স্টোরের স্টেটকে React কম্পোনেন্টের প্রপ্সে ম্যাপ করে।
• mapDispatchToProps: Redux স্টোরে একশন ডিসপ্যাচ করার ফাংশন তৈরি করে।

সারাংশ

Redux এবং React একত্রে ব্যবহারের মাধ্যমে একটি কার্যকরী স্টেট ম্যানেজমেন্ট সিস্টেম তৈরি করা যায়। React-Redux লাইব্রেরি ব্যবহারের মাধ্যমে আপনি React কম্পোনেন্টে Redux স্টোর থেকে স্টেট ব্যবহার করতে পারেন এবং স্টোরে একশন পাঠাতে পারেন।

• Provider কম্পোনেন্টটি Redux স্টোর React অ্যাপ্লিকেশনকে দেয়।
• useSelector এবং useDispatch হুক ব্যবহার করে ফাংশনাল কম্পোনেন্টে Redux স্টেট ব্যবহার করা যায়।
• ক্লাস কম্পোনেন্টে, connect HOC ব্যবহৃত হয় Redux স্টেট এবং একশন পাস করতে।

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

React এবং Redux একত্রে ব্যবহার করলে অ্যাপ্লিকেশনটি আরও বেশি স্কেলেবল এবং কার্যকরী হয়ে ওঠে। React মূলত UI-এর জন্য ব্যবহৃত হয়, যেখানে Redux স্টেট ম্যানেজমেন্টের কাজ করে। React কম্পোনেন্টের state এবং Redux store এর মধ্যে সঠিক সমন্বয় করার জন্য কিছু স্টেপ অনুসরণ করতে হয়।

React এর সাথে Redux সংযোগ করতে, আমরা সাধারণত React-Redux লাইব্রেরি ব্যবহার করি। এই লাইব্রেরি React অ্যাপ্লিকেশনকে Redux স্টোরের সাথে সংযুক্ত করার জন্য প্রয়োজনীয় Hooks এবং HOC (Higher Order Component) প্রদান করে।

React এবং Redux এর মধ্যে সংযোগ স্থাপন

React এবং Redux এর মধ্যে সংযোগ স্থাপন করতে নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করতে হয়:

1. React-Redux ইনস্টলেশন
2. Redux স্টোর তৈরি করা
3. React কম্পোনেন্টে Redux স্টোর ব্যবহার করা

1. React-Redux ইনস্টলেশন

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

npm install redux react-redux

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

2. Redux স্টোর তৈরি করা

Redux স্টোরটি অ্যাপ্লিকেশনের কেন্দ্রীয় স্টেট ধারণ করে। প্রথমে একটি Redux স্টোর তৈরি করতে হবে।

উদাহরণ: Redux স্টোর তৈরি করা

// actions.js
const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

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

export { increment, decrement };

// reducer.js
const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { 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;

এখানে:

• actions.js: দুটি অ্যাকশন (INCREMENT, DECREMENT) তৈরি করা হয়েছে, যেগুলি স্টেট পরিবর্তন করবে।
• reducer.js: একটি রিডিউসার ফাংশন তৈরি করা হয়েছে, যা স্টেটের উপর নির্ভর করে নতুন স্টেট রিটার্ন করবে।
• store.js: createStore() ফাংশনের মাধ্যমে স্টোর তৈরি করা হয়েছে, যা রিডিউসারকে পাস করা হয়েছে।

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

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

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

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';  // React-Redux এর Provider ব্যবহার করা
import App from './App';
import store from './store';

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

এখানে:

• Provider কম্পোনেন্ট store কে React অ্যাপের মধ্যে প্রদান করে, যাতে প্রতিটি কম্পোনেন্ট Redux স্টোর থেকে ডেটা পেতে পারে।

4. Redux স্টোর থেকে ডেটা পেতে

React কম্পোনেন্ট থেকে Redux স্টোরের ডেটা অ্যাক্সেস করার জন্য useSelector হুক ব্যবহার করা হয়।

উদাহরণ: useSelector হুক ব্যবহার করে Redux স্টেট পড়া

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

function App() {
  const count = useSelector((state) => state.count);  // Redux স্টোর থেকে count পড়া
  const dispatch = useDispatch();  // dispatch ফাংশন ব্যবহার করা

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

export default App;

এখানে:

• useSelector হুক দিয়ে স্টোরের ডেটা (count) পড়া হয়েছে।
• useDispatch হুক দিয়ে একশন ডিসপ্যাচ করা হচ্ছে (যেমন increment বা decrement একশন)।

5. Redux এর মাধ্যমে অ্যাকশন ডিসপ্যাচ করা

Redux স্টোর থেকে ডেটা নেওয়ার পাশাপাশি, আপনি dispatch ফাংশন ব্যবহার করে অ্যাকশনও ডিসপ্যাচ করতে পারেন। এর জন্য, React-Redux এর useDispatch হুক ব্যবহার করা হয়।

উদাহরণ: Dispatcher ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা

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

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

  return (
    <button onClick={() => dispatch(increment())}>Increment</button>
  );
}

export default IncrementButton;

এখানে:

• useDispatch হুক দিয়ে increment অ্যাকশন ডিসপ্যাচ করা হচ্ছে।

6. Redux এবং React এর মধ্যে যোগাযোগের মূল উপাদান

• Provider: React অ্যাপ্লিকেশনে Redux স্টোর প্রদান করে।
• useSelector: Redux স্টোর থেকে ডেটা পড়তে ব্যবহৃত হয়।
• useDispatch: Redux স্টোরে অ্যাকশন ডিসপ্যাচ করতে ব্যবহৃত হয়।

সারাংশ

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

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

React-Redux: Provider কী?

Provider হল React-Redux এর একটি কম্পোনেন্ট যা Redux স্টোরকে React অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্টে উপলব্ধ করে। এর মাধ্যমে React অ্যাপ্লিকেশন Redux স্টোরের সাথে যোগাযোগ স্থাপন করতে পারে, এবং স্টোর থেকে ডেটা বা অ্যাকশন অ্যাক্সেস করতে পারে।

Provider কিভাবে কাজ করে?

Provider কম্পোনেন্ট React অ্যাপ্লিকেশনকে Redux স্টোরের সাথে যুক্ত করে। এটি Redux স্টোরকে context API এর মাধ্যমে React কম্পোনেন্ট হাইয়ারার্কিতে পাস করে। এর ফলে, স্টোরের স্টেট React কম্পোনেন্টগুলোতে অ্যাক্সেসযোগ্য হয়।

Provider ব্যবহার করার উদাহরণ:

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

// Redux স্টোর তৈরি
const store = createStore(rootReducer);

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

এখানে:

1. store: Redux স্টোর তৈরি করা হয়েছে, যা rootReducer দ্বারা পরিচালিত হবে।
2. Provider: Provider কম্পোনেন্টের মধ্যে অ্যাপ্লিকেশন রেন্ডার করা হয়েছে, যা store পাস করে দেয়। এর ফলে, অ্যাপ্লিকেশনের যে কোনো কম্পোনেন্ট স্টোরের স্টেট অ্যাক্সেস করতে পারবে।

React-Redux: Connect কী?

Connect হল React-Redux এর একটি হাইয়ার অর্ডার কম্পোনেন্ট (HOC) যা React কম্পোনেন্টগুলোর সাথে Redux স্টোর সংযোগ স্থাপন করে। এটি mapStateToProps এবং mapDispatchToProps ফাংশন ব্যবহার করে স্টেট এবং অ্যাকশন প্রোপস হিসেবে কম্পোনেন্টে পাস করে।

Connect এর মাধ্যমে স্টেট এবং অ্যাকশন পাস করা:

1. mapStateToProps: এই ফাংশনটি স্টোরের স্টেটকে React কম্পোনেন্টের প্রোপস হিসেবে ম্যাপ করে দেয়।
2. mapDispatchToProps: এই ফাংশনটি অ্যাকশন ক্রিয়েটরগুলিকে React কম্পোনেন্টের প্রোপস হিসেবে ম্যাপ করে দেয়, যাতে কম্পোনেন্ট থেকে অ্যাকশন ডিসপ্যাচ করা যায়।

Connect ব্যবহার করার উদাহরণ:

import React from 'react';
import { connect } from 'react-redux';
import { increment } from './actions';

function Counter({ count, increment }) {
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

// mapStateToProps: স্টেটকে কম্পোনেন্টের প্রোপস হিসেবে মেপ করা
const mapStateToProps = state => ({
  count: state.count
});

// mapDispatchToProps: অ্যাকশন ক্রিয়েটরকে কম্পোনেন্টের প্রোপস হিসেবে মেপ করা
const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment())
});

// Connect ব্যবহার করে Redux স্টোর এবং কম্পোনেন্টকে সংযুক্ত করা
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

এখানে:

• mapStateToProps: স্টোর থেকে count নামক প্রোপসটি কম্পোনেন্টে পাস করা হচ্ছে।
• mapDispatchToProps: increment অ্যাকশন ক্রিয়েটরকে increment নামে একটি প্রোপস হিসেবে পাস করা হচ্ছে।
• connect: mapStateToProps এবং mapDispatchToProps ফাংশনকে কম্পোনেন্টের সাথে যুক্ত করছে, যাতে কম্পোনেন্ট Redux স্টোরের সাথে যোগাযোগ করতে পারে।

React-Redux: Provider এবং Connect এর মধ্যে সম্পর্ক

1. Provider কম্পোনেন্টটি Redux স্টোরকে React অ্যাপ্লিকেশন পুরোপুরি পাস করে দেয়, যাতে অ্যাপ্লিকেশনের যেকোনো কম্পোনেন্ট স্টোরের স্টেট এবং অ্যাকশন অ্যাক্সেস করতে পারে।
2. Connect হাইয়ার অর্ডার কম্পোনেন্ট হিসেবে কাজ করে, যা Redux স্টোরের স্টেট এবং অ্যাকশনগুলো React কম্পোনেন্টের প্রোপস হিসেবে মেপ করে দেয়।

কেন React-Redux ব্যবহার করবেন?

React-Redux ব্যবহারের কিছু গুরুত্বপূর্ণ সুবিধা:

1. Centralized State Management: Redux স্টোরে সমস্ত স্টেট কেন্দ্রিকভাবে সংরক্ষিত থাকে, যেটি অ্যাপ্লিকেশনের যে কোনো জায়গা থেকে সহজে অ্যাক্সেসযোগ্য।
2. Simplified Data Flow: Redux এর মাধ্যমে ডেটা ফ্লো পূর্বানুমানযোগ্য এবং স্কেলেবল হয়ে ওঠে, যেখানে কম্পোনেন্টগুলো সরাসরি স্টেট পরিবর্তন করে না, বরং অ্যাকশন ডিসপ্যাচ করে এবং স্টেট পরিবর্তন ঘটে।
3. Maintainability: Redux এবং React-Redux অ্যাপ্লিকেশনগুলির মেইন্টেনেবলিটি বৃদ্ধি পায়, কারণ স্টোরের মাধ্যমে সমস্ত স্টেট সেন্ট্রালাইজড থাকে এবং একাধিক কম্পোনেন্ট একসাথে একই স্টেট ব্যবহার করতে পারে।

সারাংশ

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

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

React Components এর মধ্যে Redux Store Access করার পদ্ধতি

React কম্পোনেন্টের মধ্যে Redux স্টোর অ্যাক্সেস করার জন্য নিচের পদ্ধতিগুলি অনুসরণ করা হয়।

useSelector হুক দিয়ে Redux Store থেকে ডেটা পড়া

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

ব্যবহার:

import { useSelector } from 'react-redux';

const MyComponent = () => {
  // Redux স্টোর থেকে ডেটা অ্যাক্সেস
  const data = useSelector((state) => state.data);
  const loading = useSelector((state) => state.loading);
  
  return (
    <div>
      {loading ? <p>Loading...</p> : <p>{data}</p>}
    </div>
  );
};

এখানে:

• useSelector হুকের মাধ্যমে আমরা Redux স্টোরের state.data এবং state.loading থেকে ডেটা পাচ্ছি।
• useSelector স্টোরের বর্তমান স্টেটের পরিবর্তন হলে কম্পোনেন্টটি আবার রেন্ডার হবে, যা React-এর reactive বৈশিষ্ট্য।

useDispatch হুক দিয়ে Redux Store এ অ্যাকশন ডেসপ্যাচ করা

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

ব্যবহার:

import { useDispatch } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  
  // অ্যাকশন ডেসপ্যাচ
  const handleClick = () => {
    dispatch(fetchData());
  };

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
    </div>
  );
};

এখানে:

• useDispatch হুকটি ডিসপ্যাচ ফাংশন রিটার্ন করে।
• fetchData() অ্যাকশন ক্রিয়েটরটি ডিসপ্যাচ করার মাধ্যমে API কল এবং ডেটা ফেচিং শুরু হয়।

connect ফাংশন ব্যবহার করে Redux Store Access করা

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

তবে, কিছু পুরনো কোডবেসে connect ফাংশন ব্যবহৃত হতে পারে। নিচে এর ব্যবহার দেখানো হলো:

ব্যবহার:

import React from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = ({ data, loading, fetchData }) => {
  return (
    <div>
      {loading ? <p>Loading...</p> : <p>{data}</p>}
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
};

// Redux স্টোর থেকে ডেটা ম্যাপ করা
const mapStateToProps = (state) => ({
  data: state.data,
  loading: state.loading,
});

// অ্যাকশন ম্যাপ করা
const mapDispatchToProps = (dispatch) => ({
  fetchData: () => dispatch(fetchData()),
});

// connect ব্যবহার করে কম্পোনেন্টটি Redux স্টোরের সাথে যুক্ত করা
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

এখানে:

• mapStateToProps: Redux স্টোর থেকে ডেটা অ্যাক্সেস করার জন্য।
• mapDispatchToProps: Redux স্টোরে অ্যাকশন ডেসপ্যাচ করার জন্য।
• connect ফাংশনটি mapStateToProps এবং mapDispatchToProps দিয়ে কম্পোনেন্টকে Redux স্টোরের সাথে যুক্ত করে।

useSelector এবং useDispatch এর তুলনা connect এর সাথে

সারাংশ

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

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

useSelector হুক

useSelector হুক ব্যবহার করে আপনি Redux স্টোরের স্টেট থেকে নির্দিষ্ট ডেটা সংগ্রহ করতে পারেন। এটি একটি selector function নেয় যা স্টেট থেকে প্রয়োজনীয় ডেটা রিটার্ন করে। useSelector হুক প্রতিবার স্টেট পরিবর্তিত হলে রি-রেন্ডার হয়।

Sintax:

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

এখানে:

• state হলো পুরো Redux স্টোরের স্টেট।
• someReducer হলো স্টোরের মধ্যে একটি নির্দিষ্ট রিডিউসার (যা আমরা সংজ্ঞায়িত করেছি)।
• someData হলো সেই রিডিউসারের মধ্যে থাকা ডেটা যা আমরা অ্যাক্সেস করতে চাই।

উদাহরণ:

import React from 'react';
import { useSelector } from 'react-redux';

function TodoList() {
  // Redux স্টোর থেকে todos স্টেট নেয়া
  const todos = useSelector(state => state.todos);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

export default TodoList;

এখানে:

• useSelector হুকের মাধ্যমে state.todos থেকে টুডো তালিকা নেয়া হচ্ছে এবং তা UI-তে প্রদর্শন করা হচ্ছে।
• যখন todos স্টেটে কোনো পরিবর্তন হবে, তখন কম্পোনেন্টটি আবার রি-রেন্ডার হবে।

useDispatch হুক

useDispatch হুক ব্যবহার করে আপনি Redux স্টোরে একশন (actions) পাঠাতে পারেন। এটি ডিসপ্যাচ (dispatch) ফাংশন রিটার্ন করে, যার মাধ্যমে আপনি একশন ক্রিয়েটর কল করতে পারেন এবং স্টোরের স্টেট পরিবর্তন করতে পারেন।

Sintax:

const dispatch = useDispatch();
dispatch(action);

এখানে:

• dispatch হলো Redux স্টোরের মাধ্যমে একশন পাঠানোর ফাংশন।
• action হলো কোনো একশন যেটি আপনি ডিসপ্যাচ করতে চান।

উদাহরণ:

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    const newTodo = {
      id: Date.now(),
      title: 'New Todo'
    };
    dispatch(addTodo(newTodo));  // addTodo একশন ডিসপ্যাচ করা
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Add Todo</button>
    </form>
  );
}

export default TodoForm;

এখানে:

• useDispatch হুক ব্যবহার করে dispatch ফাংশন নেয়া হয়েছে।
• handleSubmit ফাংশনে, একটি নতুন টুডো আইটেম তৈরি করে addTodo একশন ডিসপ্যাচ করা হয়েছে, যাতে স্টোরে টুডো যোগ করা যায়।

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

আপনি useSelector এবং useDispatch একসাথে ব্যবহার করতে পারেন যাতে Redux স্টোর থেকে ডেটা নিয়ে আসা এবং স্টোরে একশন পাঠানো একসাথে করা যায়।

উদাহরণ:

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

function TodoApp() {
  const [newTodo, setNewTodo] = useState('');
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      const todo = {
        id: Date.now(),
        title: newTodo
      };
      dispatch(addTodo(todo));
      setNewTodo('');
    }
  };

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

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.title} 
            <button onClick={() => handleRemoveTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

এখানে:

• useSelector ব্যবহার করে Redux স্টোর থেকে todos তালিকা নেয়া হয়েছে।
• useDispatch ব্যবহার করে addTodo এবং removeTodo একশন ডিসপ্যাচ করা হয়েছে।

সারাংশ

• useSelector: Redux স্টোর থেকে ডেটা রিটার্ন করে এবং স্টেট পরিবর্তন হলে কম্পোনেন্টটি রি-রেন্ডার হয়।
• useDispatch: Redux স্টোরে একশন পাঠানোর জন্য ব্যবহৃত হয়। এটি ডিসপ্যাচ ফাংশন প্রদান করে যা একশন ক্রিয়েটর কল করতে সাহায্য করে।

এই দুটি হুক ব্যবহার করলে Redux স্টোরের সাথে React কম্পোনেন্ট ইন্টারঅ্যাক্ট করা আরও সহজ এবং পরিষ্কার হয়।