সেট স্টেটের সাথে প্রতিক্রিয়ায় রাজ্য পরিচালনা করুন

একটি অ্যাপ্লিকেশনের অবস্থার ট্র্যাক রাখা হল কিভাবে একটি একক পৃষ্ঠা অ্যাপ্লিকেশন (SAP) পরিবর্তনগুলি নিবন্ধন করে এবং সেগুলি ব্যবহারকারীকে রেন্ডার করে৷ একটি মডেল, ভিউ, কন্ট্রোলার (MVC) ফ্রেমওয়ার্কের বিপরীতে, SAPs ব্যবহারকারীকে পুনঃনির্দেশ করে না, এবং তাই ক্লায়েন্টের দিক থেকে আসা পরিবর্তনগুলি পরিচালনা করার একটি উপায় প্রয়োজন। MVC ফ্রেমওয়ার্ক পর্যালোচনা করতে, এই নির্দেশিকা পড়ুন।

প্রতিক্রিয়াতে, উপাদানগুলি নিজেরাই তাদের নিজস্ব অবস্থা পরিচালনা করতে পারে এবং সেই অনুযায়ী পুনরায় রেন্ডার করতে পারে। এটি জীবনচক্র পদ্ধতির মাধ্যমে করা হয়, যা এখানে গভীরভাবে আলোচনা করা হয়েছে। এই নিবন্ধটির উদ্দেশ্যে, আমরা সেটস্টেট ব্যবহার করে কীভাবে রাজ্য পরিবর্তন করতে হয় তা দেখতে যাচ্ছি।

এই নির্দেশিকাটি প্রতিক্রিয়ার সাথে প্রাথমিক পরিচিতি অনুমান করে। রিঅ্যাক্ট বেসিকগুলি পর্যালোচনা করতে বা শিখতে, এই নিবন্ধটি কিছু সেরা প্রতিক্রিয়া শেখার সংস্থানগুলির তালিকা করে।

প্রতিক্রিয়া সেটস্টেট কি?

React setState পদ্ধতি হল কিভাবে স্থিতিশীলতার সাথে একটি উপাদানের অবস্থা পরিবর্তন করা যায়। রিঅ্যাক্টে অবস্থা পরিবর্তনের জন্য কিছু নির্দিষ্ট নির্দেশিকা রয়েছে।

1. সেটস্টেট শুধুমাত্র একটি ক্লাস কম্পোনেন্টের মধ্যেই কল করা যেতে পারে। ক্লাসের উপাদানগুলিকে constructor() বলে পদ্ধতি এবং একটি প্রাথমিক অবস্থা সেট করুন। তারপর আমরা সেটস্টেট কল করে রাজ্যকে আরও নীচে পরিবর্তন করতে পারি।
   
   প্রতিক্রিয়ায় দুটি ভিন্ন ধরণের উপাদান রয়েছে। ফাংশনাল কম্পোনেন্ট এবং ক্লাস কম্পোনেন্ট আছে। আমাদের উদ্দেশ্যে, আমরা শুধুমাত্র বর্গ উপাদান উল্লেখ করছি. আরও পর্যালোচনার জন্য, কার্যকরী এবং শ্রেণী উপাদানগুলির মধ্যে পার্থক্য সম্পর্কে এই নিবন্ধটি দেখুন।
   
2. একটি ক্লাস কম্পোনেন্টে শুধুমাত্র সেটস্টেট কল করার মাধ্যমে, আমরা এটি ব্যবহার করে কম্পোনেন্টটিকে সরাসরি উল্লেখ করতে পারি কীওয়ার্ড this.setState() কল করা হচ্ছে এটি সর্বোত্তম অনুশীলন এবং নিশ্চিত করে যে আপনার কোডটি ভাঙবে না।
   
3. রাষ্ট্র সরাসরি পরিবর্তন করবেন না। রাষ্ট্র পরিবর্তন করলে তা পুনরায় রেন্ডার করার জন্য প্রতিক্রিয়াতে নিবন্ধন করবে না। স্থিতি পরিবর্তনের পুরো বিষয়টি হল ব্যবহারকারীর কাছে পরিবর্তনগুলিকে প্রতিফলিত করার জন্য সেই উপাদানটির পুনরায় রেন্ডারিং চালু করা।

এখন, এই নির্দেশিকাগুলির প্রসঙ্গে সিনট্যাক্সের দিকে নজর দেওয়া যাক।

সেট স্টেট রিঅ্যাক্ট সিনট্যাক্স

প্রথম নির্দেশিকা দিয়ে শুরু করে, আমরা দেখতে পাচ্ছি যে আমরা শুধুমাত্র একটি ক্লাস কম্পোনেন্টের ভিতরে সেটস্টেট ব্যবহার করতে পারি। একটি উদাহরণ হিসাবে, ধরুন আমাদের একটি শপিং অ্যাপ আছে এবং আমরা একটি শপিং কার্ট বাস্তবায়ন করতে চাই। আমরা কার্ট নামে একটি ক্লাস কম্পোনেন্ট সেট আপ করতে পারি। এই উপাদানটি তার নিজস্ব অবস্থা পরিচালনার জন্য দায়ী থাকবে যখন একজন ব্যবহারকারী কার্টে একটি আইটেম যোগ করে।

class Cart extends React.Component {
  constructor(props){
    super(props);
    this.state = {shoppingCart: []}
  }

উপরের কোডটি ভেঙ্গে, আমরা ক্লাস কম্পোনেন্ট কার্ট ঘোষণা করি। সমস্ত শ্রেণীর উপাদানগুলির মতো, আমরা প্রসারিত করি প্রতিক্রিয়া. উপাদান. এটি বয়লারপ্লেট প্রতিক্রিয়া সিনট্যাক্স।

যেহেতু আমরা এই কম্পোনেন্টে স্টেট বরাদ্দ করতে চাই, তাই আমাদের কনস্ট্রাক্টর মেথড কল করতে হবে। তারপর, বেস কনস্ট্রাক্টরকে super(props) দিয়ে ডাকা হয় . বেস কনস্ট্রাক্টরকে প্রপস দিয়ে ডাকা হয়নি তা দেখা সম্ভব। অফিসিয়াল রিঅ্যাক্ট ডকুমেন্টেশন যুক্তি দেয় যে বেস কনস্ট্রাক্টর পদ্ধতি সর্বদা প্রপস সহ কল ​​করা উচিত।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

এখন যেহেতু আমরা স্টেট ধরে রাখার জন্য একটি ক্লাস কম্পোনেন্ট তৈরির প্রয়োজনীয় প্রতিক্রিয়া সিনট্যাক্সের মাধ্যমে তৈরি করেছি, আমরা আমাদের প্রাথমিক অবস্থা নির্ধারণ করতে প্রস্তুত। এই একমাত্র সময় আমরা সরাসরি রাষ্ট্রকে উল্লেখ করতে পারি। this.state = {shoppingCart: [] } কল করে রাজ্য বরাদ্দ করা আমাদের শপিং কার্টের প্রাথমিক অবস্থা একটি খালি অ্যারেতে সেট করার অনুমতি দেয়৷

প্রতিক্রিয়া সেটস্টেট উদাহরণ

উপরের বিভাগে, আমরা একটি প্রাথমিক অবস্থা ঘোষণা করার সাথে জড়িত সিনট্যাক্স দেখেছি। কনস্ট্রাক্টর পদ্ধতিতে স্টেট সেট হয়ে গেলে, আমরা যথারীতি রেন্ডার করতে পারি:

class Cart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shoppingCart: []
    }
  }
  render() {
    return (
     <div>
     <h1>Your Shopping Cart</h1>
     <div>{this.state.shoppingCart}</div>
     </div>

    );
  }
}
ReactDOM.render(
  <Cart />,
  document.getElementById('root')
);

এখানে, আমাদের কাছে একটি কার্ট ক্লাস কম্পোনেন্ট আছে যার প্রারম্ভিক স্টেট সেট আছে এবং আমরা রেন্ডার পদ্ধতির রিটার্ন স্টেটমেন্টে কার্ট রেন্ডার করছি। আসুন দেখি কিভাবে আমরা আমাদের কার্ট আপডেট করতে setState ব্যবহার করতে পারি।

আমরা একটি ফাংশন সংজ্ঞায়িত করি যা আমাদের শপিংকার্টে একটি নতুন আইটেম যোগ করবে এবং পূর্বে যোগ করা আইটেমগুলি সংরক্ষণ করবে। আমরা জাভাস্ক্রিপ্টের স্প্রেড অপারেটর (...) ব্যবহার করি প্রাথমিক অবস্থার একটি অনুলিপি তৈরি করতে এবং এটিকে নতুন অবস্থার সাথে আপডেট করতে। এইভাবে, শপিং কার্টে যোগ করা সমস্ত আইটেম রাখা হবে।

addItem(newItem) {
    this.setState({
     shoppingCart: [...this.state.shoppingCart, newItem]
    })
  }

অ্যাড আইটেম ফাংশনটি একটি বোতামের রিঅ্যাক্টের অনক্লিক অ্যাট্রিবিউটের ভিতরে ব্যবহার করা যেতে পারে যদি আমরা চাই যে ব্যবহারকারী একবার বোতামে ক্লিক করার পরে সেই আইটেমটি যোগ করতে সক্ষম হন। আমাদের উদ্দেশ্যে, একটি ফাংশনের প্রসঙ্গে সেটস্টেট কীভাবে ব্যবহার করতে হয় তা দেখাই যথেষ্ট।

সেটস্টেট কীভাবে ব্যবহার করবেন তা বোঝার জন্য এই নিবন্ধটি একটি ভূমিকা হিসাবে বোঝানো হয়েছে এবং এটি কোনওভাবেই সম্পূর্ণ নয়।

উপসংহার

এই নিবন্ধে, আমরা সেটস্টেট কী, এটি কীভাবে ব্যবহার করতে হয় তার কিছু নির্দেশিকা, সিনট্যাক্স এবং একটি সংক্ষিপ্ত উদাহরণ শিখেছি। এটি একটি প্রাইমার নিবন্ধ হতে বোঝানো হয়েছে যাতে আপনি গভীরভাবে খনন করতে এবং আপনার নিজস্ব উপাদানগুলির অবস্থা আপডেট করার অনুশীলন করতে উত্সাহিত করতে পারেন৷

অফিসিয়াল প্রতিক্রিয়া ডকুমেন্টেশনে আরও উদাহরণ রয়েছে যা অনুশীলনের আরও সুযোগ প্রদান করবে। মনে রাখবেন যে একক পৃষ্ঠার অ্যাপ্লিকেশনগুলিতে, ব্যবহারকারীর পরিবর্তনগুলি রেন্ডার করার জন্য একটি উপাদানের অবস্থার উপর নজর রাখা অপরিহার্য।