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 এর সাথে
| ফিচার | useSelector এবং useDispatch | connect |
|---|---|---|
| API Calls | সহজ, হুকের মাধ্যমে পরিচালনা করা যায় | mapDispatchToProps এর মাধ্যমে |
| কোড লেখা সহজতা | কম কোড লিখতে হয় | একটু বেশি কোড লাগে |
| স্টেট ম্যানেজমেন্ট | Reactive | প্যাসিভ, রেন্ডারিং প্রক্রিয়া |
| লাইফ সাইকেল | React হুক ব্যবহার করা হয় | কম্পোনেন্ট লাইফসাইকেল-এর সাথে কাজ করে |
সারাংশ
React-Redux হুক useSelector এবং useDispatch ব্যবহার করে React কম্পোনেন্টে Redux স্টোর অ্যাক্সেস করা খুবই সহজ। useSelector স্টোর থেকে ডেটা পড়তে ব্যবহৃত হয় এবং useDispatch স্টোরে অ্যাকশন ডেসপ্যাচ করতে ব্যবহৃত হয়। এটি আমাদের অ্যাপ্লিকেশনকে আরও ইফেক্টিভ এবং স্কেলেবল করে তোলে। যেহেতু connect একটি পুরনো পদ্ধতি, তাই এখনকার অধিকাংশ React কোডবেসে হুক ব্যবহার করাই প্রাধান্য পায়।
Read more
