উপাদান স্টেট বনাম রেডাক্স স্টোর

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

সুতরাং, এই নিবন্ধে আমি কখন উপাদান উপাদান চয়ন করতে হবে এবং কখন রেডাক্স স্টোরকে সহজ নির্বাচন করতে হবে তার মধ্যে এই পার্থক্য তৈরি করার দিকে চেষ্টা করব।

শুরু করার জন্য প্রথমে প্রতিক্রিয়াটির দিকে দৃষ্টি নিবদ্ধ করা যাক।

প্রতিক্রিয়াতে দুটি ধরণের উপাদান রয়েছে: -

  1. স্মার্ট উপাদান
  2. বোবা উপাদান - প্রেজেন্টেশনাল উপাদান হিসাবেও ডাকা হয়

আমি তাদের দুজনের মধ্যে যেভাবে পার্থক্য করি তা হ'ল: -

যদি কোনও উপাদানটির অবস্থা ধরে রাখা দরকার তবে এটি একটি স্মার্ট উপাদান হিসাবে শ্রেণিবদ্ধ করে।
যদি কোনও উপাদানটির কেবলমাত্র ডেটা প্রদর্শন করা প্রয়োজন এবং উপস্থাপক উপাদান বা বোবা উপাদান হিসাবে শ্রেণিবদ্ধ করা হয় তার চেয়ে এটির মূল উপাদানটি থেকে ডেটা পেতে পারে।

উদাহরণস্বরূপ: - আসুন আমরা বলি যে আমাদের একটি ই-কমার্স অ্যাপ্লিকেশন রয়েছে যেখানে আমাদের পণ্য তালিকা পৃষ্ঠা রয়েছে যা পণ্যগুলির তালিকা প্রদর্শন করে।

এই পরিস্থিতিতে, একটি কঙ্কাল বা একটি খালি লেআউটে নিম্নলিখিত উচ্চ স্তরের উপাদান থাকবে: -


 <শিরোনাম />
 <সাইডমেনু />
 
 

এখানে প্রোডাক্টস কনটেনার উপাদানটি পণ্যগুলির তালিকা পাওয়ার দিকে মনোনিবেশ করবে এবং তারপরে প্রতিটি পণ্যের মাধ্যমে পুনরাবৃত্তি করবে এবং প্রতিটি পণ্য উপাদানকে রেন্ডার করবে।

এখানে আমরা প্রোডাক্টস কনটেনারকে একটি স্মার্ট উপাদান হিসাবে কল করতে পারি যেহেতু এই উপাদানটি এমন একটি রাষ্ট্র ধারণ করে যা এই ক্ষেত্রে পণ্যগুলির একটি তালিকা।

প্রোডাক্ট উপাদানটির জন্য নমুনা কোড যা আমাদের উপস্থাপক উপাদান এটির মতো দেখতে লাগবে: -

উপরেরটি একটি উপস্থাপক উপাদান, যেহেতু এটি কেবল ডেটা প্রদর্শনের জন্য দায়বদ্ধ এবং এটি এর মূল উপাদান থেকে প্রপসের আকারে সেই ডেটাটি গ্রহণ করে।

সুতরাং উপসংহারে যদি কোনও উপাদান রাষ্ট্রকে ধরে রাখে এবং ম্যানিপুলেট করে তবে এটি একটি স্মার্ট উপাদান এবং যদি কোনও উপাদান কেবল প্রস আকারে প্রাপ্ত ডেটা প্রদর্শন করে তবে তা উপস্থাপিত উপাদান হিসাবে শ্রেণিবদ্ধ হয়।

ড্যান আব্রামভের একটি স্বর্ণের উক্তি যা এটি হাইলাইট করে:

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

এটি ছিল কম্পোনেন্ট স্টেট সম্পর্কে, পরের প্রশ্নটি যা আমাদের মনে আসে তা হ'ল রিডুএক্স স্টোরের মধ্যে কোন ডেটা উচিত।

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

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

এই কার্টের তথ্যটি প্রচুর পৃষ্ঠায় এবং শিরোনামের উপাদানগুলির মতো উপাদানগুলিতে অবিচ্ছিন্ন থাকা দরকার যেখানে আমরা কার্টের গণনা, চেকআউট পৃষ্ঠা এবং অর্থ প্রদানের পৃষ্ঠাটি দেখাব।

এটি স্পষ্ট ইঙ্গিত দেয় যে কার্টে যুক্ত পণ্যগুলিকে উপাদান স্টেটের পরিবর্তে রূডক্স স্টোরের ভিতরে যাওয়া উচিত।

এটি আমাদের উপাদানগুলির মধ্যে আরও একটি পার্থক্য এনেছে: -

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

উদাহরণ স্বরূপ:-

শপিং অ্যাপ উপাদানটি একটি ধারক উপাদান হিসাবে শ্রেণিবদ্ধ করতে পারে এবং প্রাথমিক কার্টের গণনা এবং লগইন তথ্য আনার জন্য দায়বদ্ধ হতে পারে।

আমরা রিডেক্সের কার্যকারিতা এবং ম্যাপস্টেটটোপ্রোপস, অ্যাকশন স্রষ্টা, প্রেরণকারীদের মতো আলাদা আলাদা রেডেক্স ফাংশনগুলিতে গভীরভাবে যাব না।

এই সমস্ত জিনিস রেডাক্স ডক্স থেকে পড়া যায়।

আমরা যে চূড়ান্ত অ্যাপটি তৈরি করব তার মকআপ হ'ল এরকম কিছু হবে: -

হ্রাসকারী, উপাদান, পাত্রে যোগ করার পরে ক্রিয়াগুলি আমার ডিরেক্টরি কাঠামোটি কীভাবে চায় তা উদাহরণ: -

এখানে শপিং অ্যাপ রিডাক্স স্টোরের সাথে সংযুক্ত হবে এবং প্রাথমিক কার্টের ডেটা পাওয়ার জন্য একটি ক্রিয়া প্রেরণ করবে his এটি শপিং অ্যাপটিকে ধারক উপাদান হিসাবে তৈরি করে।

শপিং অ্যাপ্লিকেশনটি শিরোনামের উপাদানগুলিতে এই ডেটাটি দেবে।

এটি শিরোনামকে কেবল একটি উপাদান হিসাবে তৈরি করে এবং এটি এর নিজস্ব উপাদান হিসাবে না থাকায় এটি আরও উপস্থাপিত উপাদান হিসাবে শ্রেণীবদ্ধ হয়।

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

উপরের উদাহরণের সম্পূর্ণ কোডটি নিম্নলিখিত কোডস্যান্ডবক্স url এ পাওয়া যাবে: -

কিছু স্টাইলিংয়ের জন্য আমি উপাদান-ui প্রতিক্রিয়া যুক্ত করেছি।

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

আরও পড়া

  • উপস্থাপনা এবং ধারক উপাদান
  • Redux ডকুমেন্টেশন
  • ধারক উপাদান