নির্দিষ্ট পার্শ্ব প্রতিক্রিয়ার জন্য আমি কখন নতুন সাবস্ক্রিপশন তৈরি করব?

Question

গত সপ্তাহে আমি একটি আরএক্সজেএস প্রশ্নের উত্তর দিয়েছিলাম যেখানে আমি অন্য সম্প্রদায়ের সদস্যের সাথে এই বিষয়ে আলোচনায় এসেছি: "আমি কি প্রতিটি নির্দিষ্ট পার্শ্ব প্রতিক্রিয়ার জন্য সাবস্ক্রিপশন তৈরি করতে পারি বা আমার সাধারণভাবে সাবস্ক্রিপশন হ্রাস করার চেষ্টা করা উচিত?" সম্পূর্ণ প্রতিক্রিয়াশীল অ্যাপ্লিকেশন পদ্ধতির ক্ষেত্রে কোন পৌরাণিক কাহিনীটি ব্যবহার করতে হবে বা কখন অন্য থেকে অন্যটিতে যেতে হবে তা জানতে চাই। এটি আমাকে এবং সম্ভবত অন্যদেরকে অস্বচ্ছল আলোচনা এড়াতে সহায়তা করবে।

সেটআপ তথ্য

• সমস্ত উদাহরণ টাইপস্ক্রিপ্টে রয়েছে
• প্রশ্নে আরও ভাল ফোকাসের জন্য সাবস্ক্রিপশনের জন্য লাইফসাইক্যাল / কনস্ট্রাক্টর ব্যবহার এবং কাঠামোর সাথে সম্পর্কযুক্ত না রাখার জন্য
  • কল্পনা করুন: সাবস্ক্রিপশনগুলি কনস্ট্রাক্টর / লাইফলাইকেল ডিআইডিতে যুক্ত করা হয়েছে
  • কল্পনা করুন: আনসাবস্ক্রাইবটি লাইফাইসাইকেল নষ্টে সম্পন্ন হয়

পার্শ্ব প্রতিক্রিয়া কী (কৌণিক নমুনা)

• ইউআই-তে আপডেট / ইনপুট (উদাঃ value$ | async)
• একটি উপাদান আউটপুট / প্রবাহ (যেমন @Output event = event$)
• বিভিন্ন শ্রেণিবিন্যাসের বিভিন্ন পরিষেবার মধ্যে ইন্টারেক্টন

উদাহরণস্বরূপ ইউজকেস:

• দুটি ফাংশন: foo: () => void; bar: (arg: any) => void
• দুটি উত্স পর্যবেক্ষণযোগ্য: http$: Observable<any>; click$: Observable<void>
• foohttp$নির্গত হওয়ার পরে বলা হয় এবং এর কোনও মূল্য প্রয়োজন হয় না
• barclick$ইমিটের পরে বলা হয় , তবে এর বর্তমান মান প্রয়োজনhttp$

কেস: প্রতিটি নির্দিষ্ট পার্শ্ব প্রতিক্রিয়া জন্য একটি সাবস্ক্রিপশন তৈরি করুন

const foo$ = http$.pipe(
  mapTo(void 0)
);

const bar$ = http$.pipe(
  switchMap(httpValue => click$.pipe(
    mapTo(httpValue)
  )
);

foo$.subscribe(foo);
bar$.subscribe(bar);

কেস: সাধারণভাবে সাবস্ক্রিপশন হ্রাস করুন

http$.pipe(
  tap(() => foo()),
  switchMap(httpValue => click$.pipe(
    mapTo(httpValue )
  )
).subscribe(bar);

সংক্ষেপে আমার নিজস্ব মতামত

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

Answer 1

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

তবে এমন পরিস্থিতি রয়েছে যেখানে সাবস্ক্রিপশন তৈরি করা উপকারী হতে পারে যা কঠোরভাবে 'প্রয়োজনীয়' নয়:

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

আপনার প্রথম উদাহরণটি খুঁজছেন:

// Component:

this.value$ = this.store$.pipe(select(selectValue));

// Template:

<div>{{value$ | async}}</div>

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

// It works, but don't do this...

<ul *ngIf="value$ | async">
    <li *ngFor="let val of value$ | async">{{val}}</li>
</ul>

এই পরিস্থিতিতে, আমি পরিবর্তে পৃথক সাবস্ক্রিপশন তৈরি করব এবং এটি আমার উপাদানটিতে একটি অ-অ্যাসিঙ্ক ভেরিয়েবল আপডেট করতে ব্যবহার করব:

// Component

valueSub: Subscription;
value: number[];

ngOnInit() {
    this.valueSub = this.store$.pipe(select(selectValue)).subscribe(response => this.value = response);
}

ngOnDestroy() {
    this.valueSub.unsubscribe();
}

// Template

<ul *ngIf="value">
    <li *ngFor="let val of value">{{val}}</li>
</ul>

প্রযুক্তিগতভাবে, এটি ছাড়া একই ফলাফল অর্জন করা সম্ভব valueSub, তবে অ্যাপ্লিকেশনটির প্রয়োজনীয়তার অর্থ এটি সঠিক পছন্দ।

সাবস্ক্রাইব করবেন কিনা তা সিদ্ধান্ত নেওয়ার আগে পর্যবেক্ষণযোগ্যের ভূমিকা এবং জীবনকাল বিবেচনা করা

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

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

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

আনসাবস্ক্রিপশন সম্পর্কে:

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

ব্যক্তিগত পছন্দ / ভার্বোসিটি বনাম ক্ষুদ্রতা:

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

Comments

আপনার বিস্তারিত উত্তরের জন্য প্রথমে আপনাকে ধন্যবাদ! # 1 সম্পর্কিত: আমার দৃষ্টিকোণ থেকে অ্যাসিঙ্ক পাইপটি একটি সাবস্ক্রিপশন / পার্শ্ব প্রতিক্রিয়া, কেবল এটি কোনও নির্দেশিকার অভ্যন্তরে মুখোশযুক্ত। # 2 সম্পর্কিত আপনি দয়া করে কিছু কোডের নমুনা যুক্ত করতে পারেন, আপনি আমাকে ঠিক কী বলছেন তা আমি পাই না। আনসাবস্ক্রিপশন সম্পর্কে: আমার আগে এটি কখনও হয় নি যে এনজিওএনডাস্ট্রয়ে ব্যতীত অন্য কোনও স্থানে সাবস্ক্রিপশন বাতিল করা দরকার। প্রথম () সত্যই আপনার ডিফল্টরূপে সাবস্ক্রাইবটি পরিচালনা করে না: 0 উপাদানগুলি নষ্ট হয়ে গেলেও 0 এমিট = সাবস্ক্রিপশন খোলা থাকে।

— জোনাথন স্টেলওয়াগ

পয়েন্ট 2 আসলে সাবস্ক্রিপশন সহ প্রতিটি পর্যবেক্ষণযোগ্য স্বয়ংক্রিয়ভাবে অনুসরণ করার পরিবর্তে, সাবস্ক্রিপশন সেটআপ করার বিষয়ে সিদ্ধান্ত নেওয়ার সময় প্রতিটি পর্যবেক্ষণযোগ্য ভূমিকার কথা বিবেচনা করার বিষয়ে ছিল। এই মুহুর্তে, আমি মাঝারি . com/ @ benlesh / rxjs-dont-unsubscribe-6753ed4fda87 দেখার পরামর্শ দিচ্ছি , যা বলেছে: "প্রচুর সাবস্ক্রিপশন অবজেক্টগুলি রাখা আপনার পক্ষে সাবস্ক্রিপশনকে অপরিহার্যভাবে পরিচালনা করছেন, এবং সুবিধা না নেওয়ার লক্ষণ is আরএক্স এর শক্তি। "

— ম্যাট স্যান্ডার্স

প্রশংসিত ধন্যবাদ @ জোনাথন স্টেলওয়াগকে। আর ই আর কলব্যাক্স তথ্যের জন্যও ধন্যবাদ - আপনার অ্যাপ্লিকেশনগুলিতে, আপনি কি এটিকে প্রতিরোধ করতে প্রতিটি সাবস্ক্রিপশন (উদাহরণস্বরূপ যেখানে প্রথম () ব্যবহৃত হয়) থেকে স্পষ্টতই সাবস্ক্রাইব করেন?

— ম্যাট স্যান্ডার্স

হ্যাঁ আমি করেছি. বর্তমান প্রকল্পে আমরা সবসময় নোডস্ক্রাইব করে সবসময় নোডের চারদিকে ঝুলন্ত প্রায় নূন্যতম করে ফেলেছি।

— জোনাথন স্টেলওয়াগ

সাবস্ক্রাইব করার জন্য আমার পছন্দটি এমন takeUntilকোনও ফাংশনের সাথে সংযুক্ত যা থেকে ডাকা হয়েছিল ngOnDestroy। এটা একটা এক মাছ ধরার নৌকা যে নল এই যোগ দেওয়া হল: takeUntil(componentDestroyed(this))। stackoverflow.com/a/60223749/5367916

— কার্ট হ্যামিল্টন

Answer 2

সাবস্ক্রিপশনগুলির অনুকূলকরণ যদি আপনার শেষ খেলা হয় তবে কেন লজিক্যাল চূড়ান্ত দিকে যান না এবং কেবল এই সাধারণ প্যাটার্নটি অনুসরণ করুন:

 const obs1$ = src1$.pipe(tap(effect1))
 const obs2$ = src2$pipe(tap(effect2))
 merge(obs1$, obs2$).subscribe()

একচেটিয়াভাবে ট্যাপে পার্শ্ব প্রতিক্রিয়াগুলি সম্পাদন করা এবং মার্জ সহ সক্রিয় করার অর্থ আপনার কাছে কেবলমাত্র একটি সাবস্ক্রিপশন রয়েছে।

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

আমি তর্ক করব যে আপনার পর্যবেক্ষণগুলি যৌক্তিকভাবে রচনা করা উচিত, এবং সাবস্ক্রিপশন হ্রাস করার নামে দূষিত বা বিভ্রান্ত হওয়া উচিত নয়। Foo এফেক্টটি কী যুক্তিসঙ্গতভাবে বার এফেক্টের সাথে মিলিত হওয়া উচিত? একজনের কি অন্যজন দরকার? এইচটিএমএল its প্রকাশের পরে আমি কি সম্ভবত ট্রিগার ফু চাইব না? আমি কি সম্পর্কযুক্ত ফাংশনের মধ্যে অপ্রয়োজনীয় সংযোগ তৈরি করছি? এগুলিকে এক স্রোতে এড়ানো এড়াতে এই সমস্ত কারণ।

এগুলি এমনকি ত্রুটি পরিচালনার বিষয়টি বিবেচনা করছে না যা একাধিক সাবস্ক্রিপশন আইএমও দিয়ে পরিচালনা করা সহজ

Comments

আপনার উত্তর করার জন্য আপনাকে ধন্যবাদ। আমি দুঃখিত যে আমি কেবল একটি উত্তর গ্রহণ করতে পারি। আপনার উত্তরটি @ ম্যাট সান্ডার্সের লিখিত সমান অধিকার। এটি দেখতে অন্য একটি দৃষ্টিকোণ। ম্যাট এর প্রচেষ্টার কারণে আমি তাকে গ্রহণ করেছি। আমি আশা করি আপনি আমাকে ক্ষমা করতে পারেন :)

— জোনাথন স্টেলওয়াগ