বিক্রিয়া রিডেক্সে উপাদান এবং ধারকটির মধ্যে পার্থক্য কী?
উত্তর:
Componentপ্রতিক্রিয়া এপিআই এর অংশ। একটি উপাদান একটি শ্রেণি বা ফাংশন যা প্রতিক্রিয়া UI এর অংশ বর্ণনা করে।
ধারক একটি রিডাক্ট উপাদানটির জন্য একটি অনানুষ্ঠানিক শব্দ যা connectএকটি রেডুক্স স্টোরে তৈরি হয়। ধারকরা Redux স্থিতির আপডেট এবং dispatchক্রিয়াকলাপগুলি গ্রহণ করে এবং তারা সাধারণত DOM উপাদান সরবরাহ করে না; তারা উপস্থাপক শিশু উপাদানগুলিতে রেন্ডারিং প্রতিনিধিত্ব করে ।
আরও বিশদের জন্য ড্যান আব্রামভের উপস্থাপনামূলক বনাম ধারক উপাদানগুলি পড়ুন ।
যে উপাদানটি ডেটা আনার এবং প্রদর্শনের জন্য দায়বদ্ধ সেগুলিকে স্মার্ট বা ধারক উপাদান বলা হয়। ডেডু রিডেক্স, যে কোনও নেটওয়ার্ক কল বা তৃতীয় পক্ষের সাবস্ক্রিপশন থেকে আসতে পারে।
বোবা / প্রেজেন্টেশনাল উপাদানগুলি হ'ল যা প্রাপ্ত প্রপসের ভিত্তিতে ভিউ উপস্থাপনের জন্য দায়বদ্ধ।
এখানে উদাহরণ সহ ভাল নিবন্ধ
https://www.cronj.com/blog/difference-container-component-react-js/
উপাদানগুলি ভিউটির পিয়াস তৈরি করে, সুতরাং এটি ডওম উপাদানগুলি রেন্ডার করে, স্ক্রিনে সামগ্রী রাখে।
ধারকরা ডেটা বিস্তারে অংশ নেয়, সুতরাং এটি রিডুএক্সের সাথে "কথা বলা উচিত", কারণ এটির ক্ষেত্রে রাষ্ট্রটি পরিবর্তন করা দরকার। সুতরাং, আপনার সংযোগটি কীভাবে যুক্ত করা উচিত ( বিক্রিয়া - রিডেক্স ) এটি সংযোগটি কী তৈরি করে এবং ম্যাপস্টেটটোপ্রপস এবং মানচিত্রডিসপ্যাচটপোপ্রোপগুলি :
.
.
.
import { connect } from "react-redux";
class myContainer extends Component {
}
function mapStateToProps(state) {
// You return what it will show up as props of myContainer
return {
property: this.state.property
};
}
function mapDispatchToProps(dispatch) {
// Whenever property is called, it should be passed to all reducers
return bindActionCreators({ property: property }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(myContainer);উপাদান
উপাদানগুলি আপনাকে ইউআইকে স্বতন্ত্র, পুনরায় ব্যবহারযোগ্য টুকরোগুলিতে ভাগ করতে দেয় এবং প্রতিটি বিচ্ছিন্ন অংশ সম্পর্কে চিন্তা করতে পারে। এগুলিকে মাঝে মাঝে "উপস্থাপক উপাদান" বলা হয় এবং প্রধান উদ্বেগ বিষয়গুলি কেমন দেখায়
পাত্রে
ধারকগুলি ঠিক ইউআই ছাড়া উপাদানগুলির মতো এবং পাত্রগুলি কীভাবে কাজ করে তা নিয়ে উদ্বিগ্ন । । এটি মূলত ডেটা পাওয়ার ও আপডেট করার জন্য রেডুক্স স্টোরের সাথে কথা বলে
রেডাক্স ডক থেকে টেবিলের তুলনা দেখুন
বিস্তারিত ব্যাখ্যা https://redux.js.org/basics/usage-with-react#presentational-and-container-components
প্রতিক্রিয়া, Redux স্বাধীন গ্রন্থাগার।
প্রতিক্রিয়া আপনাকে HTML ডকুমেন্ট তৈরির জন্য একটি কাঠামো সরবরাহ করে। উপাদানগুলি নথির কোনও নির্দিষ্ট অংশকে উপস্থাপন করে। কোনও উপাদানগুলির সাথে যুক্ত পদ্ধতিগুলি ডকুমেন্টের খুব নির্দিষ্ট অংশটি ম্যানিপুলেট করতে পারে।
রেডাক্স একটি ফ্রেমওয়ার্ক যা জেএস পরিবেশে ডেটা সংরক্ষণ এবং পরিচালনা করার জন্য একটি নির্দিষ্ট ফিলোসফিকে নির্দেশ করে। এটি নির্দিষ্ট পদ্ধতির সংজ্ঞাযুক্ত একটি বড় জেএস অবজেক্ট, সেরা ব্যবহারের ক্ষেত্রে ওয়েব অ্যাপ্লিকেশনের রাজ্য পরিচালনার আকারে আসে।
যেহেতু প্রতিক্রিয়া নির্দেশ করে যে সমস্ত ডেটা মূল থেকে পাতায় প্রবাহিত হওয়া উচিত, তাই এটি সমস্ত প্রপসকে মুখ্য করে দেওয়া ক্লান্তিকর হয়ে ওঠে, উপাদানগুলিতে প্রপস সংজ্ঞায়িত করে এবং তারপরে বাচ্চাদের কাছে কিছু প্রপসের কাছে প্রপসগুলি প্রেরণ করে। এটি সম্পূর্ণ অ্যাপ্লিকেশন রাষ্ট্রকে দুর্বল করে তোলে।
রিঅ্যাক্ট রেডাক্স একটি পরিষ্কার সমাধান সরবরাহ করে, যেখানে এটি আপনাকে সরাসরি অন্য কোনও প্রতিক্রিয়া উপাদান (আপনার Container) এর সাথে সংযুক্ত উপাদানটি মোড়ানো করে সরাসরি Redux স্টোরের সাথে সংযুক্ত করে । যেহেতু আপনার প্রয়োগে, আপনার বাস্তবায়ন আপনি ইতিমধ্যে সংজ্ঞায়িত করেছেন যে পুরো অ্যাপ্লিকেশনটির কোন অংশটি আপনার প্রয়োজন। সুতরাং connectসেই তথ্যটি স্টোরের বাইরে নিয়ে যায় এবং এটি নিজেকে উপাদানটিকে মোড়া করে এমন উপাদানগুলিতে প্রপস হিসাবে পাস করে।
এই সহজ উদাহরণ বিবেচনা করুন:
class Person extends Component {
constructor(props){
this.name = this.props.name;
this.type = this.props.type;
}
render() {
return <p> My name is {this.name}. I am a doctor { this.type } </p>
}
}
const connect = InnerComponent => {
class A extends Component{
render() {
return <InnerComponent {...this.props} type="Doctor"/>
}
}
A.displayName = `Connect(${InnerComponent.displayName})`
return A
}connectফাংশন একটি প্রস্তাব পাস type।
এইভাবে কোনও সংযোগ ব্যক্তি উপাদানগুলির জন্য ধারক হিসাবে কাজ করে।
প্রতিক্রিয়াটির দুটি প্রধান উপাদান রয়েছে প্রথমটি হ'ল স্মার্ট উপাদান (ধারক) এবং দ্বিতীয়টি বোবা (উপস্থাপনা উপাদান)। ধারকগুলি উপাদানগুলির সাথে খুব সমান, কেবলমাত্র পার্থক্যটি হ'ল পাত্রে অ্যাপ্লিকেশনের অবস্থা সম্পর্কে সচেতন। যদি আপনার ওয়েবপৃষ্ঠার কিছু অংশ কেবল ডেটা প্রদর্শনের জন্য ব্যবহৃত হয় (বোবা) তবে এটি একটি উপাদান তৈরি করুন। আপনার যদি অ্যাপ্লিকেশনটিতে রাষ্ট্রের (যখনই ডেটা পরিবর্তন হয়) স্মার্ট এবং সচেতন হওয়ার প্রয়োজন হয় তবে এটিকে একটি ধারক করুন।