অ্যাপোলো বনাম রেডাক্স - ডেটা দিয়ে রেন্ডারিং

অ্যাপোলো এবং রেডাক্স 2 টি জনপ্রিয় লাইব্রেরি যা প্রতিক্রিয়াটির সাথে ব্যবহৃত হয়। এগুলি বিভিন্ন কারণে অন্তর্ভুক্ত রয়েছে তবে মূলত:
1. একটি স্টোর পরিচালনা করা
২. তথ্য আনা সহায়তা পরিচালনা করা
৩. আপডেট হওয়া প্রপসগুলির সাথে কোনও পুনরায় রেন্ডারিং ট্রিগার করা

তবে এগুলি করার জন্য তারা কোন ব্যবস্থার অধীনে-হুড ব্যবহার করে এবং প্রপস পরিচালনা করতে এবং রেন্ডারিংয়ের ক্ষেত্রে এগুলি কীভাবে আলাদা হয়?

আমি তদন্তের সিদ্ধান্ত নিয়েছি এবং নীচে এটির পণ্য।

TLDR;

অ্যাপোলো একটি পর্যবেক্ষণযোগ্য ব্যবহার করে এবং ম্যানুয়ালি পুনরায় রেন্ডার করতে বাধ্য করে, রেন্ডার-পয়েন্টে ডেটার জন্য বর্তমান অবজার্ভেবলকে পড়ে।

রেডাক্স একটি পর্যবেক্ষণযোগ্যও ব্যবহার করে তবে পর্যবেক্ষক বিজ্ঞপ্তিগুলি ব্যবহার করে গ্রাহকদের জন্য স্থানীয় রাষ্ট্র আপডেট করে।

Observables

প্রথমে স্পর্শ করার জন্য গুরুত্বপূর্ণ কিছু হ'ল পর্যবেক্ষণযোগ্য। এগুলি কয়েকটি শক্তিশালী বৈশিষ্ট্য সহ একটি নতুন অ্যাসিঙ্ক আদিম। একটি প্রাথমিক উদাহরণ নীচে।

  1. সাবস্ক্রিপশন ফাংশন থেকে আপনার পর্যবেক্ষণযোগ্য তৈরি করুন
কনস্ট সাবস্ক্রিপশন ফাংশন = (পর্যবেক্ষক) =>
   // কিছু জিনিস করুন, async হতে পারে।
   পর্যবেক্ষক.নেক্সট ("কিছু ডেটা সহ কল ​​করুন");
   observer.complete ();
   রিটার্ন () => কনসোল.লগ ("সাবস্ক্রাইব করা")
}
const ourObservable = নতুন পর্যবেক্ষণযোগ্য (সাবস্ক্রিপশন ফাংশন);

আপনার সাবস্ক্রাইব সাবস্ক্রাইব। এটি সাবস্ক্রিপশনটির কাজ শুরু করবে।

কনস্ট্রাক্ট গ্রাহক = আমাদের অবজারভেট.সউসক্রাইব ({
   পরের (x) {কনসোল.লগ (এক্স)}, // "কিছু ডেটা সহ কল ​​করুন"
   ত্রুটি (ত্রুটি) {কনসোল.লগ ("এর ত্রুটিযুক্ত ত্রুটি পেয়েছি
   ক্রম.") },
   সম্পূর্ণ () {কনসোল.লগ ("স্ট্রিমটি সফলভাবে শেষ হয়েছে" ")}
});
subscriber.unsubscribe (); // "সদস্যতা ছাড়াই"

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

তাদের অলস, বাতিলযোগ্য সহ একাধিক শক্তিশালী বৈশিষ্ট্য রয়েছে এবং একের পর একাধিকবার চালানো যায়।

আজকে একটি নির্দিষ্ট-অনুমানের উপায়ে তাদের ব্যবহার করতে জেন-পর্যবেক্ষণযোগ্য দেখুন।

আসুন অ্যাপোলো দিয়ে শুরু করা যাক

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

এইচটিটিপি অনুরোধের প্রতিক্রিয়া পাওয়ার পরে স্টোরটি আপডেট করা হয় এবং তারপরে একটি "ফোর্স রেন্ডার ()" ট্রিগার করা হয় (প্রদত্ত উপাদানটির অভ্যন্তরে পুনরায় রেন্ডারটিকে ম্যানুয়ালি ট্রিগার করার জন্য প্রতিক্রিয়া পদ্ধতি)।

সবশেষে "রেন্ডার প্রপ প্যাটার্ন" ব্যবহার করে বাচ্চাদের বর্তমান পর্যবেক্ষণের বাইরে ডেটা দিয়ে রেন্ডার করা হয়। এখানে লক্ষণীয় যে প্রতিক্রিয়া রাষ্ট্রটি এখানে ব্যবহার করা হয়নি।

একটি মৌলিক ক্যোয়ারী উপাদান সহ একটি পৃষ্ঠা-লোডে ইভেন্টগুলির ভাঙ্গনের জন্য নীচে দেখুন।

অ্যাপোলো সহ একটি পৃষ্ঠা-লোডের সম্পূর্ণ অ্যানাটমি

এখন Redux এ

রেডাক্সের সাহায্যে আমরা প্রকৃত এইচটিটিপি আনার প্রক্রিয়াটিকে অগ্রাহ্য করব (ধরে নিচ্ছি এর জন্য থাঙ্কস বা সাগাস ব্যবহৃত হয়) এবং স্টোর আপডেট এবং উপাদান পুনরায় রেন্ডারগুলিতে ফোকাস করবে।

যখন কোনও উপাদান "সংযুক্ত করে") এটি স্টোর পর্যবেক্ষণযোগ্য (রেডাক্স স্টোর পর্যবেক্ষণযোগ্য এখানে আরও) এর গ্রাহকদের তালিকায় যুক্ত করা হয়।
যখন কোনও রিডিউসার স্টোরের স্থিতি পরিবর্তন করে, সমস্ত গ্রাহককে অবহিত করা হয় এবং একটি "সেটস্টেট ()" চালায়।

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

রেডাক্সের সংযোগের একটি সরলীকৃত সংস্করণ নীচে রয়েছে:

ক্লাস কানেক্টটি উপাদানকে প্রসারিত করে {
     ট্রাই সাবস্ক্রাইব () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (এই))
        this.handleChange ()
     }
     উপাদানডিডমাউন্ট () {
       this.trySubscribe ()
     }
     হ্যান্ডেল চেঞ্জ () {
       কনস্ট স্টোর স্টেট = এই স্টোর.গেট স্টেট ()
       কনস্ট prevStoreState = this.state.storeState
       // স্টোর ব্যবহার করে যুক্তি এবং প্রতিক্রিয়া স্থিতি
       // স্টোরের স্থিতি পরিবর্তিত হলে, প্রতিক্রিয়ার স্থিতি আপডেট করুন
       এই.সেটস্টেট ({স্টোরস্টেট})
     }
}

সারাংশ

আমি এটি আকর্ষণীয় মনে করি যে উভয় গ্রন্থাগার তারা পর্যবেক্ষণযোগ্যদের বিভিন্ন ব্যবস্থার সাথে ব্যবহার করার পরেও পর্যবেক্ষণযোগ্যদের ব্যবহার করে।

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

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

এরপরে আমি এই পদ্ধতির উপকারিতা এবং কনসগুলি পরীক্ষা করতে এবং এই লাইব্রেরিগুলি কেন তাদের দৃষ্টিভঙ্গি বেছে নিয়েছে তা যুক্তি দিয়ে চেষ্টা করতে চাই।

আপনি যদি এটি পছন্দ করেন তবে একটি তালি বাঁচান। আপনার কোনও চিন্তাভাবনা বা প্রতিক্রিয়া থাকলে বিকল্পভাবে আমাকে জানান। ধন্যবাদ :)