React এর সাথে Redux এর সংযোগ

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 হুক দিয়ে একশন ডিসপ্যাচ করা হয়।