প্রতিক্রিয়া হুকগুলির সাথে উদ্বেগের বিচ্ছেদ

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

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

তাই রিঅ্যাক্টে, আমরা সমস্ত যুক্তিযুক্ত কন্টেইনার উপাদান তৈরি করে এই সমস্যাটির সমাধান করেছি, যা প্রপসের মাধ্যমে উপস্থাপনামূলক উপাদানে ডেটা পাঠাবে।

প্রতিক্রিয়া হুক প্রবর্তনের সাথে, এটির জন্য একটি নতুন পদ্ধতি রয়েছে: ব্যবহার করা কাস্টম হুক.

কেন আমরা উপাদান থেকে যুক্তি পৃথক করা উচিত?

আমাদের প্রতিক্রিয়া উপাদানগুলি থেকে যুক্তিগুলিকে ডিকপল করা শুরু করার আগে, আমাদের কেন জানা উচিত।

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

প্রতিক্রিয়ায় এটি প্রয়োগ করার অর্থ হল আমাদের উপাদানটি আরও পরিষ্কার এবং আরও সংগঠিত দেখাবে। উদাহরণস্বরূপ, UI সম্পাদনা করার আগে আমাদের যুক্তির প্রাচীর অতিক্রম করার দরকার নেই।

এইভাবে আপনার কোড সংগঠিত করা শুধুমাত্র এটিকে আরও ভাল এবং নেভিগেট করা সহজ করে তোলে না, এটি পরিবর্তন করাও সহজ করে তোলে কারণ হুক পরিবর্তন করা UI এবং এর বিপরীতে প্রভাবিত করে না।

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

রিঅ্যাক্ট হুক দিয়ে লজিককে কিভাবে ডিকপল করা যায়

আমাদের কম্পোনেন্ট থেকে লজিক ডিকপল করতে, আমরা প্রথমে একটি কাস্টম হুক তৈরি করব।

আসুন এই উপাদানটিকে উদাহরণ হিসাবে নেওয়া যাক। এটি ভিত্তি সংখ্যা এবং সূচকের সূচকীয় মান গণনা করে:

আপনি সম্পূর্ণ সোর্স কোড খুঁজে পেতে পারেন এখানে.

কোড নিম্নলিখিত মত দেখায়:

export const ExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return (
    <div className="blue-wrapper">
      <input
        type="number"
        className="base"
        onChange={handleBaseChange}
        placeholder="Base"
        value={base}
      />
      <input
        type="number"
        className="exponent"
        onChange={handleExponentChange}
        placeholder="Exp."
        value={exponent}
      />
      <h1 className="result">{result}</h1>
    </div>
  );
};

এটি ইতিমধ্যে সূক্ষ্ম দেখাতে পারে, কিন্তু এই টিউটোরিয়ালের জন্য, শুধু কল্পনা করা যে এখানে আরো যুক্তি আছে.

প্রথম ধাপ হিসেবে আমরা করব যুক্তিটিকে একটি কাস্টম হুকে নিয়ে যান এবং আমাদের উপাদানের ভিতরে এটি কল করুন।

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return {
    base,
    exponent,
    result,
    handleBaseChange,
    handleExponentChange,
  };
};

export const ExponentCalculator = () => {
  const {
    base,
    exponent,
    result,
    handleExponentChange,
    handleBaseChange,
  } = useExponentCalculator();

  // ...
};

আমরা একটি এই হুক সরাতে পারে পৃথক ফাইল উদ্বেগ একটি আরো বিশিষ্ট বিচ্ছেদ জন্য.

উপরন্তু, আমরা আমাদের হুককে আরও ছোট, পুনঃব্যবহারযোগ্য ফাংশনে আলাদা করতে পারি। এই ক্ষেত্রে, আমরা শুধুমাত্র নিষ্কাশন করতে পারেন calculateExponent.

ExponentCalculator.js ব্যবহার করুন

const calculateExponent = (base, exponent) => base ** exponent;

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = calculateExponent(base, exponent).toFixed(2);

  // ...
};

এই ফাংশনগুলি পরীক্ষা করা প্রথম উদাহরণ থেকে সম্পূর্ণ কম্পোনেন্টের কোড পরীক্ষা করার চেয়ে অনেক সহজ। আমরা যেকোন Node.js টেস্টিং লাইব্রেরি দিয়ে সেগুলি পরীক্ষা করতে পারি, যার এমনকি প্রতিক্রিয়া উপাদানগুলিকে সমর্থন করার প্রয়োজন নেই৷

আমাদের এখন কম্পোনেন্ট এবং হুকের কোডে আমাদের ফ্রেমওয়ার্ক-নির্দিষ্ট কোড (প্রতিক্রিয়া) আছে, যখন আমাদের ব্যবসায়িক যুক্তি বিভিন্ন ফাংশনে বাস করে যা আমরা পরে সংজ্ঞায়িত করেছি (যা ফ্রেমওয়ার্ক-অজ্ঞেয়বাদী)।

সেরা অনুশীলন

নামকরণ

আমি আমার কাস্টম হুকের নাম কম্পোনেন্টের সংমিশ্রণ হিসাবে রাখতে চাই use এবং উপাদানের নাম (যেমন useExponentCalculator) আমি তারপর কল একই ফাইল হুক হিসাবে

আপনি একটি ভিন্ন নামকরণের নিয়ম অনুসরণ করতে চাইতে পারেন, কিন্তু আমি সুপারিশ করি ধারাবাহিক থাকা আপনার প্রকল্পে।

যদি আমি একটি কাস্টম হুকের অংশগুলি পুনঃব্যবহার করতে পারি, তবে আমি সাধারণত এটিকে অন্য ফাইলে নিয়ে যাই src/hooks.

এটি অতিরিক্ত না

বাস্তববাদী হওয়ার চেষ্টা করুন। যদি একটি উপাদানে JS-এর মাত্র কয়েকটি লাইন থাকে, তাহলে যুক্তিটিকে আলাদা করার প্রয়োজন নেই।

সিএসএস-ইন-জেএস

আপনি যদি একটি CSS-in-JS লাইব্রেরি ব্যবহার করেন (useStyles), আপনি এই কোডটিকে অন্য ফাইলেও সরাতে চাইতে পারেন।

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

উপসংহার

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

কাস্টম হুক মডুলারিটি বাড়ানোর একমাত্র উপায়; আমি অত্যন্ত সুপারিশ করবে উপাদান এবং ফাংশনগুলিকে ছোট, পুনঃব্যবহারযোগ্য খণ্ডে বিভক্ত করা কখন সম্ভব.

বিষয়টি আরও সাধারণ স্তরে আলোচনা করা হয়েছে প্রাগম্যাটিক প্রোগ্রামার. আমি বইয়ের আমার প্রিয় বিষয়গুলি কভার করে একটি নিবন্ধ লিখেছি, তাই যদি এটি আপনার আগ্রহ থাকে তবে নিশ্চিত করুন৷ এটি পরীক্ষা করে দেখুন.